jquery animate, set interval and inactive window issue

Question

So I have this weird issue that i am hitting, i have a slide show in which set interval fires up jquery animate method. all works great.

Until i switch tabs. If i switch back to tab with slideshow in some time, all of the sudden animation is fired repeatedly, with out any inteval in place. Like it is playing catch up.

I kind of figured that it has something to do with RequestAnimationFrame and jQuery's animate method. And how animation rendering is suppressed while tab is inactive. While interval is kept on firing up every so often, even when window is inactive.

Could any one elaborate more on this, would much appreciate it.

Here is the core code that does that:

function animate(setCurrent){
    animationDistance = opt.cSlideWidth * (opt.cCurrentSlide - 1);
    carousel.animate({left: '-' + animationDistance}, opt.cTransitionSpeed});
}
opt.cSetUpIntervalMethod = function(action){
    if (action === 'start') {
        clearInterval(opt.cSlideTimer);
        opt.cSlideTimer = setInterval(function(){animate();},opt.cSlideDelay);
    }
}
opt.cSetUpIntervalMethod('start');

Answer 1

This was a bug in older versions of JQuery which has since been fixed as of 1.6.3. Update your version.

"We had high hopes for the browser’s requestAnimationFrame API when we added support into version 1.6. However, one of the highest-volume complaints we’ve received since then relates to the way requestAnimationFrame acts when a tab is not visible. All the animations initiated when the tab is invisible “stack” and are not executed until the tab is brought back into focus. Then they all animate at warp speed! We’ve removed support for this API (which has no impact on the way you call jQuery’s animation features) and plan to incorporate it into a future version of jQuery."

http://blog.jquery.com/2011/09/01/jquery-1-6-3-released/