Jquery setInterval too fast when coming from another tab

At the beginning I would like to apologize for all the mistakes - my English is not perfect.

The solution of your problem may be very simple:

$(window).load(function() {     setInterval(nextSlide, 3500);});function nextSlide(){       offset += delta;    $("#slideContent").stop(true,true).animate({left: -1 * offset}, 1000);}

inactive browser tabs buffer some of the setInterval or setTimeout functions.stop(true,true) - will stop all buffered events and execute immadietly only last animation.This problem will also appears in Firefox > 5.0 - read this article: Firefox 5 - changes

The window.setTimeout() method now clamps to send no more than one timeout per second in inactive tabs. In addition, it now clamps nested timeouts to the smallest value allowed by the HTML5 specification: 4 ms (instead of the 10 ms it used to clamp to).

here you can read, how animate works - it fires setInterval function many times. How animate really works in jQuery

The latest versions of Chrome apparently slow down the operation of setInterval when a tabbed page is in the background and then when you bring that page forward it tries to catch up.

On the Chromium blog, Google said:

In the forthcoming Chrome 11 release, we plan to reduce CPU consumption even for pages that are using setTimeout and setInterval. For background tabs, we intend to run each independent timer no more than once per second. This change has already been implemented in the Chrome dev channel and canary builds.

Your interval is 3.5 seconds, but the animation itself may be using much shorter timers.

Possible ways to work-around it:

• Stop your timer/animation when the window is not visible. Restart the timer/animation when the window becomes visible.
• Instead of setInterval, use setTimeout and then just reset the setTimeout each time it fires to create your own repeating interval - though in your case, it may be jQuery's use of timers that are the issue - I don't know.
• Slow your timers down so they don't run afoul of this (again might be inside of jQuery not your own timers).

The best option is probably to figure out when to just stop and then restart the animation.

Similar question here: Chrome: timeouts/interval suspended in background tabs?.

FYI, Chrome has new experimental API for detecting page visibility for just this reason. You can read about it here: http://code.google.com/chrome/whitepapers/pagevisibility.html. it helps solve the issue when your page is visible, but doesn't have focus.

Hey are you using Jquery 1.6?

This may be the cause since 1.6 uses requestAnimationFrame for animations.You may want to check this page out for a replacement for setInterval, clearInterval

http://blog.blenderbox.com/2011/06/24/jquery-1-6-1-and-setinterval/

code:https://gist.github.com/1002116 [edit: updated source, edit2: currently doesnt work with firefox due to firefox bug. -- I had do downgrade to JQuery 1.5]

From the blogger:

Then, where you were calling setInterval(func, poll), you now call requestInterval(func, poll). Where you call clearInterval(interval), you now call clearRequestInterval(interval);