Question

Looking at other questions here they seem to report setInterval is disabled or slowed down when a tab is hidden. I am seeing a different problem – calls to setInterval appear to “stack” and then all get applied when the tab is shown.

In my case I have a slider which animates an image on the site homepage every few seconds. If I go to another tab for a minute or two then return, the slider goes crazy… all the animations fire one after another until it is caught up.

I tried adding code to stop the animation happening if another is already in progress, but it doesn’t work… maybe the timer events get queued in some way that circumvents my test.

   setInterval(function(){
                    if (!rotationQueued) {
                                        rotationQueued = true;
                                        rotate_slide('next');
                                    }
                         }

So, I want the JS to pause when the tab is hidden – or to act as normal – anything but this!!

Answer 1

You could try something like this:

function runRotate() {
    return window.setInterval(function(){
        if (!rotationQueued) {
            rotationQueued = true;
            rotate_slide('next');
        }
    });
}

var run = runRotate();

window.addEventListener('focus', function() {
    run = runRotate();
},false);

window.addEventListener('blur', function() {
    window.clearInterval(run);
},false);

You would basically look to see if the browser window is focused or not and then run or disable the setInterval function depending on the event returned.