Pausando setInterval cuando la página/navegador está fuera de foco

Question

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

Para evitar que los navegadores para atornillar setInterval cuando la página no está en el foco (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; 
     } 

Dónde mySlideRotateFunction establece el setInterval y corre algo de jQuery Si bien esto funciona la mayoría de las veces, me parece que, en ocasiones, parece que en Blur no se ha ejecutado, y cuando regreso a la página los tiempos se han "acumulado" y las rotaciones se vuelven locas.

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

Mi pregunta: ¿hay un problema con mi código, y alguien tiene una mejor sugerencia para 'pausar' setInterval cuando la ventana del navegador está desenfocada?

Gracias

Answer 1

intentar 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

Answer 2

Inmediatamente dentro setInterval, colocan una comprobación para ver si el documento está enfocado. El intervalo continuará activando como de costumbre, pero el código interno solo se ejecutará si el documento está enfocado. Si la ventana se ve 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 "alcance" ejecutando el bloque de código un montón de veces cuando se restablece el enfoque.

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