Js Animation using setInterval getting slow over time

Question

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?

Don't use setIntervcal, because: ejohn.org/blog/how-javascript-timers-work For animations you want Window.requestAnimationFrame() and not the timeout functions anyway: creativejs.com/resources/requestanimationframe - Mozilla spec: developer.mozilla.org/en/docs/Web/API/… — John Smith
– John Smith, Commented Dec 12, 2013 at 21:42

freethejazz · Accepted Answer · 2013-12-12 21:48:52Z

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/

Thank you for the suggestion of not creating objets over and over again. The animation is now more stable. I did not try the requestAnimationFrame though.

Collectives™ on Stack Overflow

Js Animation using setInterval getting slow over time

1 Answer 1

1 Comment

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Related