2011-04-23 13 views
18

¿Hay alguna manera de detener el conteo cuando la página no está activa? setTimeout("myfunction()",10000);. Por ejemplo,Ejecute setTimeout solo cuando la pestaña esté activa

  1. Un usuario llega a una "cierta página" y permanece allí durante 2000 ms
  2. usuario pasa a otra pestaña, deja "un poco de página" abierta.
  3. myfunction() no se dispara hasta que hayan vuelto por otros 8000ms.

Respuesta

34

Aquí van:

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

Demostración en directo:http://jsfiddle.net/simevidas/J68dJ/3/show/

+0

A menos que me falta algo, esto no ejecutará las funciones de setInterval en la carga de la página inicial antes de cualquier interacción del usuario, como clics en la página, ya que el evento 'onfocus' no parece activarse en la carga de la página inicial. –

+0

@torazaburo Inicialmente, 'window.blurred' será' undefined' que es lo mismo que si fuera 'false'. Por lo tanto, el temporizador comienza la cuenta regresiva automáticamente. Observe cómo el 'setInterval' se ejecuta inmediatamente, no espera a que ocurra un enfoque o desenfoque. –

+1

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

0

Lo que tendría que hacer es configurar un mecanismo para establecer tiempos de espera en pequeños intervalos, manteniendo un registro del tiempo total transcurrido. También podría rastrear "mouseenter" y "mouseleave" en toda la página (<body> o algo así). Cuando caducan los tiempos de espera a corto plazo, pueden verificar el estado de la ventana (entrada o salida) y no reiniciar el proceso cuando la ventana no está enfocada. El controlador "mouseenter" iniciaría todos los temporizadores en pausa.

editar — @ Šime Vidas ha publicado un excelente ejemplo.

3

Usted puede hacer algo como:

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

ventana es para IE, documento es para el resto del mundo navegador.

+0

gracias por esta respuesta. Usé el otro ya que cumplía todos los requisitos. Pero sobre este, tuve más éxito con '$ (ventana)' como el objeto para todos los navegadores. – Kyle

6

Gran respuesta por Šime Vidas, me ayudó con mi propia codificación. Para completarlo hice un ejemplo para si desea utilizar setTimeout en lugar de 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;}; 

})(); 

verá que el cheque ventana borrosa tiene un tiempo más corto de lo normal establecido, por lo que puede configurar esta función de cómo pronto necesita que el resto de la función se ejecute cuando la ventana recupera el foco.

0

uso casi el mismo enfoque que Šime Vidas en mi deslizador pero mi código se basa en document.visibilityState para la comprobación de la página visibilidad:

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

}); 
Cuestiones relacionadas