203 votos

Detectar el tiempo de inactividad en JavaScript con elegancia

¿Es posible detectar " ocioso " tiempo en JavaScript?
Mi principal caso de uso sería probablemente el de pre-búsqueda o pre-carga de contenido.

Tiempo de ocio: Período de inactividad del usuario o sin uso de la CPU

236voto

freddoo Puntos 2310

He aquí un sencillo script usando JQuery que maneja los eventos de mover el ratón y presionar las teclas. Si el tiempo expira, la página se recarga.

<script type="text/javascript">
var idleTime = 0;
$(document).ready(function () {
    //Increment the idle time counter every minute.
    var idleInterval = setInterval(timerIncrement, 60000); // 1 minute

    //Zero the idle timer on mouse movement.
    $(this).mousemove(function (e) {
        idleTime = 0;
    });
    $(this).keypress(function (e) {
        idleTime = 0;
    });
});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 19) { // 20 minutes
        window.location.reload();
    }
}
</script>

34voto

equiman Puntos 365

Sin usar jQuery, sólo JavaScript:

var inactivityTime = function () {
    var t;
    window.onload = resetTimer;
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;

    function logout() {
        alert("You are now logged out.")
        //location.href = 'logout.php'
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(logout, 3000)
        // 1000 milisec = 1 sec
    }
};

Créditos: http://forums.devshed.com/showpost.PHP?p=1965136&postcount=10

22voto

Peter J Puntos 23798

Aquí hay una implementación aproximada de la idea de Tvanfosson:

$(document).ready(function(){

   idleTime = 0;

   //Increment the idle time counter every second.
   var idleInterval = setInterval(timerIncrement, 1000);

   function timerIncrement()
   {
     idleTime++;
     if (idleTime > 2)
     {
       doPreload();
     }
   }

   //Zero the idle timer on mouse movement.
   $(this).mousemove(function(e){
      idleTime = 0;
   });

   function doPreload()
   {
     //Preload images, etc.
   }

})

20voto

Tracker1 Puntos 6573

Similar a la solución de Iconic arriba (con jQuery)...

//when the document is loaded
$(function(){

  //create an event handler for the mousemove
  var preLoadTimer;
  $(this).mousemove(function(e){
    //clear prior timeout, if any
    window.clearTimeout(preLoadTimer);

    //create new timeout.
    preLoadTimer = window.setTimeout(doPreLoad, 2000);
  });

});

8voto

tvanfosson Puntos 268301

Probablemente podrías hackear algo juntos detectando el movimiento del ratón en el cuerpo de la forma y actualizando una variable global con el último tiempo de movimiento. Entonces necesitarías tener funcionando un temporizador de intervalos que compruebe periódicamente el último tiempo de movimiento y haga algo si ha pasado suficiente tiempo desde que se detectó el último movimiento del ratón.

Iteramos.com

Iteramos es una comunidad de desarrolladores que busca expandir el conocimiento de la programación mas allá del inglés.
Tenemos una gran cantidad de contenido, y también puedes hacer tus propias preguntas o resolver las de los demás.

Powered by:

X