When using setInterval, if I switch tabs in Chrome and go back, the slider goes crazy catching up

Question

I have a jQuery slider on my site and the code going to the next slide is in a function called nextImage. I used setInterval to run my function on a timer, and it does exactly what I want: it runs my slides on a timer. BUT, if I go to the site in Chrome, switch to another tab and return, the slider runs through the slides continuously until it 'catches up'. Does anyone know of a way to fix this. The following is my code.

setInterval(function() { nextImage(); }, 8000); 

Answer 1

How to detect when a tab is focused or not in Chrome with Javascript?

window.addEventListener('focus', function() {     document.title = 'focused'; },false);  window.addEventListener('blur', function() {     document.title = 'not focused'; },false); 

To apply to your situation:

var autopager; function startAutopager() {     autopager = window.setInterval(nextImage, 8000); } function stopAutopager() {     window.clearInterval(autopager); }  window.addEventListener('focus', startAutopager);     window.addEventListener('blur', stopAutopager); 

Note that in the latest version of Chromium, there is either a bug or a 'feature' which is making this less reliable, requiring that the user has clicked at least once anywhere in the window. See linked question above for details.

Answer 2

I post an answer here: How can I make setInterval also work when a tab is inactive in Chrome?

Just do this:

setInterval(function() {     $("#your-image-container").stop(true,true);     nextImage();  }, 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.

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).