Mettere in pausa setInterval quando la pagina/browser non è a fuoco

Question

Ho una presentazione semplice che ho creato sulla home page di un cliente, utilizzando setInterval per cronometrare le rotazioni.

Per impedire ai browser di avvitamento setInterval quando la pagina non è a fuoco (un'altra scheda sta osservando, o un altro programma), sto 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; 
     } 

Dove mySlideRotateFunction imposta la setInterval e corre qualche jQuery. Mentre questo funziona la maggior parte del tempo, trovo che, a volte, sembra che onBlur non sia stato eseguito, e quando torno alla pagina i tempi si sono "accumulati" e le rotazioni impazziscono.

Non riesco a determinare il motivo per cui ciò accade occasionalmente, e non su altri.

La mia domanda- c'è un problema con il mio codice, e qualcuno ha un suggerimento migliore per 'mettere in pausa' setInterval quando la finestra del browser non è a fuoco?

Grazie

Answer 1

provare qualcosa di simile:

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 
} 

alcuni test fatto in IE9 e FF6

Answer 2

immediatamente all'interno setInterval, posizionare un controllo per vedere se il documento si concentra. L'intervallo continuerà a sparare come al solito, ma il codice interno verrà eseguito solo se il documento è focalizzato. Se la finestra è sfocata e successivamente rimessa a fuoco, l'intervallo avrà continuato a mantenere il tempo ma era false durante questo periodo, quindi non è necessario che il browser "rilevi" eseguendo il blocco di codice un paio di volte quando viene ripristinata la messa a fuoco.

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