javascript - stop - Pausar setInterval cuando la página/navegador está fuera de foco

setinterval jquery

Question

Tengo una presentación de diapositivas simple que he hecho en la página de inicio de un cliente, utilizando setInterval para cronometrar las rotaciones.

Para evitar que los navegadores arruinen setInterval cuando la página no está enfocada (se está viendo otra pestaña u otro programa), estoy usando:

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

        function onFocus() {

            mySlideRotateFunction();

        };

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

Donde mySlideRotateFunction establece el setInterval y ejecuta algunos jQuery. Aunque esto funciona la mayoría de las veces, en ocasiones, parece que onBlur no se ha ejecutado, y cuando vuelvo a la página, los tiempos se han "acumulado" y las rotaciones se han vuelto locas.

No puedo determinar una causa de por qué esto sucede en ocasiones, y no en otras.

Mi pregunta: ¿hay algún problema con mi código? ¿Alguien tiene una mejor sugerencia para "pausar" setInterval cuando la ventana del navegador está fuera de foco?

Gracias

Answer 1

Inmediatamente dentro de setInterval , setInterval una comprobación para ver si el documento está enfocado. El intervalo continuará activándose como de costumbre, pero el código interno solo se ejecutará si el documento está enfocado. Si la ventana está borrosa y luego se vuelve a enfocar, el intervalo continuará manteniendo el tiempo pero document.hasFocus() fue false durante ese tiempo, por lo que no es necesario que el navegador se ponga al día ejecutando el bloque de código varias veces cuando el foco se restaura

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 );
});

Answer 2

Intenta algo como esto:

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
}

Algunas pruebas realizadas en IE9 y FF6