Приостановка setInterval, когда страница / браузер не в фокусе

Question

У меня есть простое слайд-шоу, которое я сделал на домашней странице клиента, используя setInterval для определения времени поворотов.

Чтобы браузеры не испортили setInterval, когда страница не в фокусе (другая вкладкапросматривается, или другая программа), я использую:

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

        function onFocus() {

            mySlideRotateFunction();

        };

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

Где mySlideRotateFunction устанавливает setInterval и запускает некоторые jQuery.Хотя это работает большую часть времени, я нахожу, что иногда кажется, что onBlur не запускается, и когда я возвращаюсь на страницу, время «нарастает», и вращение сходит с ума.

Я не могу точно определить причину, по которой это происходит иногда, а не у других.

Мой вопрос - есть ли проблема с моим кодом, и есть ли у кого-нибудь лучшее предложение для «приостановки»'setInterval, когда окно браузера не в фокусе?

Спасибо

Answer 1

Попробуйте что-то вроде этого:

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
}

Некоторое тестирование сделано в IE9 и FF6

Answer 2

Сразу внутри setInterval, поставьте галочку, чтобы увидеть, сфокусирован ли документ. Интервал будет продолжать работать как обычно, но код внутри будет выполняться только в том случае, если документ сфокусирован. Если окно размыто и позже перефокусировано, интервал продолжит сохранять время, но document.hasFocus() было false в течение этого времени, поэтому нет необходимости для браузера "догонять", выполняя блок кода несколько раз, когда фокус восстановлен.

var timePerInterval = 7000;
$(document).ready(function() {
    setInterval(function(){
        if ( document.hasFocus() ) {
            // code to be run every 7 seconds, but only when tab is focused
        }
    }, timePerInterval );
});