javascriptjquerysetintervalonblur

Pausing setInterval when page/ browser is out of focus


I have a simple slideshow that I've made on a client's homepage, using setInterval to time the rotations.

To prevent browsers from screwing up setInterval when the page isn't in focus (another tab is being viewed, or another programme), I'm using:

function onBlur() {
            clearInterval(play);
        };

        function onFocus() {

            mySlideRotateFunction();

        };

        if (/*@cc_on!@*/false) { 
            document.onfocusin = onFocus;
            document.onfocusout = onBlur;
        } else {
            window.onfocus = onFocus;
            window.onblur = onBlur;
        }

Where mySlideRotateFunction sets the setInterval and runs some jQuery. While this works the majority of the time, I find that, on occasion, it appears as though onBlur hasn't run, and when I return to the page the timings have 'built up' and the rotations go crazy.

I can't quite determine a cause as to why this happens on occasion, and not on others.

My question- is there a problem with my code, and does anyone have a better suggestion for 'pausing' setInterval when browser window is out of focus?

Thanks


Solution

  • Try something like this:

    var myInterval;
    var interval_delay = 500;
    var is_interval_running = false; //Optional
    
    $(document).ready(function () {
        $(window).focus(function () {
            clearInterval(myInterval); // Clearing interval if for some reason it has not been cleared yet
            if  (!is_interval_running) //Optional
                myInterval = setInterval(interval_function, interval_delay);
        }).blur(function () {
            clearInterval(myInterval); // Clearing interval on window blur
            is_interval_running = false; //Optional
        });
    });
    
    interval_function = function () {
         is_interval_running = true; //Optional
         // Code running while window is in focus
    }
    

    Some testing done in IE9 and FF6