2011-04-23 12 views
18

Esiste un modo per fermare setTimeout("myfunction()",10000); dal conteggio quando la pagina non è attiva. Per esempio,Run setTimeout solo quando scheda è attiva

  1. Un utente arriva a una "qualche pagina" e vi rimane per 2000ms
  2. utente va a un'altra scheda, lascia "un po 'di pagina" aperta.
  3. myfunction() non viene generato fino a quando hanno tornare per un altro 8000ms.

risposta

34

Qui si va:

(function() { 
    var time = 10000, 
     delta = 100, 
     tid; 

    tid = setInterval(function() { 
     if (window.blurred) { return; }  
     time -= delta; 
     if (time <= 0) { 
      clearInterval(tid); 
      myFunction(); // time passed - do your work 
     } 
    }, delta); 
})(); 

window.onblur = function() { window.blurred = true; }; 
window.onfocus = function() { window.blurred = false; }; 

demo dal vivo:http://jsfiddle.net/simevidas/J68dJ/3/show/

+0

A meno che non mi manca qualcosa, questo non verrà eseguito funzioni setInterval al caricamento della pagina iniziale prima di eventuali interazioni degli utenti, come fa clic sulla pagina, dal momento che l'evento 'onfocus' non sembra di sparare al caricamento della pagina iniziale. –

+0

@torazaburo Inizialmente, 'window.blurred' sarà' undefined' che è la stessa come se fosse 'false'. Quindi, il timer inizia automaticamente il conto alla rovescia. Notare come il 'setInterval' viene eseguito immediatamente - non attende la messa a fuoco o la sfocatura. –

+1

È possibile utilizzare document.hidden: https://developer.mozilla.org/en-US/docs/Web/API/Page_Visibility_API#document.hidden_Read_only – SleepWalker

0

Quello che dovresti fare è impostare un meccanismo per impostare i timeout a piccoli intervalli, tenendo traccia del tempo trascorso totale. Dovresti anche tenere traccia di "mouseenter" e "mouseleave" sull'intera pagina (lo <body> o qualcosa del genere). Quando scadono i timeout a breve termine, possono controllare lo stato della finestra (in entrata o in uscita) e non riavviare il processo quando la finestra non è a fuoco. Il gestore "mouseenter" avvierebbe tutti i timer in pausa.

modifica — @ Šime Vidas ha pubblicato un eccellente esempio.

3

Si può fare qualcosa di simile:

$([window, document]).blur(function(){ 
     // Clear timeout here 
}).focus(function(){ 
     // start timeout back up here 
}); 

finestra è per IE, il documento è per il resto del mondo del browser.

+0

ringrazio per questa risposta. Ho usato l'altro in quanto ha soddisfatto tutte le richieste. Ma riguardo a questo, ho avuto più successo con '$ (window)' come oggetto per tutti i browser. – Kyle

6

Grande risposta da Šime Vidas, mi ha aiutato con il mio codice. Per completezza ho fatto un esempio per se si desidera utilizzare setTimeout invece di setInterval:

(function() { 

    function myFunction() { 
     if(window.blurred) { 
      setTimeout(myFunction, 100); 
      return; 
     } 

     // What you normally want to happen 

     setTimeout(myFunction, 10000); 
    }; 
    setTimeout(myFunction, 10000); 

    window.onblur = function() {window.blurred = true;}; 
    window.onfocus = function() {window.blurred = false;}; 

})(); 

vedrete che il controllo della finestra offuscata ha un tempo più breve rispetto al normale set, in modo da poter impostare questo a seconda di come presto si richiederà il resto della funzione da eseguire quando la finestra riprende la messa a fuoco.

0

io uso quasi lo stesso approccio Šime Vidas nel mio dispositivo di scorrimento ma il mio codice si basa su document.visibilityState per il controllo pagina visibilità:

var interval = 4000; 

function slideshow() { 
    // slideshow code 
}; 

$(document).ready(function() { 

var switchInterval; 

function intervalHandler() { 
    switchInterval = setInterval(function() { 
    if (document.visibilityState === "visible") { 
     slideshow(); 
    } else { 
     return; 
    } 
    }, interval); 
} 

intervalHandler(); 

}); 
Problemi correlati