CODEWITHSUNDEEP
javascriptjquery
Stephan L
Stephan L

Reputation: 412

Js Animation using setInterval getting slow over time

I have a web site which displays a portfolio using this scrollbar http://manos.malihu.gr/jquery-custom-content-scroller/ .

I want to have an automatic scroll when the page is fully loaded. When a user pass over the portfolio it stops the scroll and whe, he leaves it starts moving again.

It currently works well but sometimes it's getting slow or sluggish randomly. Is there something wrong with my js function?

Here's the page having problems : http://www.lecarreau.net/new/spip.php?rubrique5 (I need the change the hosting provider, I know the site is slow).

This is the function:

(function($){
var timerId = 0;
$(window).load(function(){
    $("#carousel").show().mCustomScrollbar( {
        mouseWheel:false,
        mouseWheelPixels:50,
        horizontalScroll:true,
        setHeight:370,
        scrollButtons:{
            enable: true,
            scrollSpeed:50
        },
        advanced:{
            updateOnContentResize:true
        }
    });
    timerId = setInterval(function(){myTimer()},50);
    $('#carousel').mouseenter(function () {
      clearInterval(timerId);
    });
    $('#carousel').mouseleave(function () {
      timerId = setInterval(function(){myTimer()},50);
    });
});
})(jQuery);


function myTimer()
{
  var width = $(".mCSB_container").width();
  var left = $(".mCSB_container").position().left;
  if (width-left>0) {
    var scrollTo = -left+4;
    $("#carousel").mCustomScrollbar("scrollTo", scrollTo);
  }
}

Is there something obvious I'm missing?

Upvotes: 0

Views: 873

Answers (1)

freethejazz
freethejazz

Reputation: 2285

Timing in the browser is never guaranteed. Since all functionality contents for time on a single event loop, continuous repeated tasks sometimes get a little janky.

One thing you could do that might decrease the jank is to cache the jQuery objects you're creating every 50ms:

var mCSBContainerEl = $(".mCSB_container");
var carouselEl = $("#carousel")
function myTimer()
{
  var width = mCSBContainerEl.width();
  var left = mCSBContainerEl.position().left;
  if (width-left>0) {
    var scrollTo = -left+4;
    carouselEl.mCustomScrollbar("scrollTo", scrollTo);
  }
}

Selecting these to elements only needs to happen once. From there they can just reference a variable instead of having to find the element on the page and wrap it in jQuery again and again.

Caching the variable in this case depends on them being in the DOM when the code runs, which isn't guaranteed here. You may have to move the variable assignment and function declaration into the function passed to load.

Also, as John Smith suggested, consider checking out requestAnimationFrame. Here's a shim I use by Paul Irish: http://www.paulirish.com/2011/requestanimationframe-for-smart-animating/

Upvotes: 1

Related Questions