¿Cómo detectar el tiempo de inactividad en JavaScript con elegancia?

¿Es posible detectar el tiempo " inactivo " en JavaScript?
Mi caso de uso principal probablemente sería precargar o precargar contenido.

Tiempo de inactividad : período de inactividad del usuario o sin uso de CPU

Aquí hay un script simple que usa JQuery que maneja los eventos de mousemove y keypress. Si el tiempo expira, la página se vuelve a cargar.

<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>   

Sin usar jQuery, solo JavaScript vainilla:

var inactivityTime = function () {
    var time;
    window.onload = resetTimer;
    // DOM Events
    document.onmousemove = resetTimer;
    document.onkeypress = resetTimer;

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

    function resetTimer() {
        clearTimeout(time);
        time = setTimeout(logout, 3000)
        // 1000 milliseconds = 1 second
    }
};

E inicie la función donde la necesite (por ejemplo: onPageLoad).

window.onload = function() {
  inactivityTime(); 
}

Puede agregar más eventos DOM si es necesario. Los más utilizados son:

document.onload = resetTimer;
document.onmousemove = resetTimer;
document.onmousedown = resetTimer; // touchscreen presses
document.ontouchstart = resetTimer;
document.onclick = resetTimer;     // touchpad clicks
document.onkeypress = resetTimer;
document.addEventListener('scroll', resetTimer, true); // improved; see comments

O registre los eventos deseados utilizando una matriz

window.addEventListener('load', resetTimer, true);
var events = ['mousedown', 'mousemove', 'keypress', 'scroll', 'touchstart'];
events.forEach(function(name) {
 document.addEventListener(name, resetTimer, true); 
});

Lista de eventos DOM : http://www.w3schools.com/jsref/dom_obj_event.asp

Recuerde usar window, o documentsegún sus necesidades. Aquí puede ver las diferencias entre ellos: ¿Cuál es la diferencia entre ventana, pantalla y documento en Javascript?

El código actualizado con @ frank-conijn y @daxchen mejoran: window.onscrollno se activará si el desplazamiento está dentro de un elemento desplazable, porque los eventos de desplazamiento no burbujean. window.addEventListener('scroll', resetTimer, true), el tercer argumento le dice al oyente que capture el evento durante la fase de captura en lugar de la fase de burbuja.

Mejorando la respuesta de Equiman:

function idleLogout() {
    var t;
    window.onload = resetTimer;
    window.onmousemove = resetTimer;
    window.onmousedown = resetTimer;  // catches touchscreen presses as well      
    window.ontouchstart = resetTimer; // catches touchscreen swipes as well 
    window.onclick = resetTimer;      // catches touchpad clicks as well
    window.onkeypress = resetTimer;   
    window.addEventListener('scroll', resetTimer, true); // improved; see comments

    function yourFunction() {
        // your function for too long inactivity goes here
        // e.g. window.location.href = 'logout.php';
    }

    function resetTimer() {
        clearTimeout(t);
        t = setTimeout(yourFunction, 10000);  // time is in milliseconds
    }
}
idleLogout();

.
Además de las mejoras con respecto a la detección de actividad y el cambio de documenta window, este script realmente llama a la función, en lugar de dejarla inactiva.

No detecta el uso de CPU cero directamente, pero eso es imposible, porque ejecutar una función provoca el uso de CPU. Y la inactividad del usuario finalmente conduce a un uso cero de la CPU, por lo que indirectamente captura un uso cero de la CPU.

Creé una pequeña biblioteca que hace esto hace un año:

https://github.com/shawnmclean/Idle.js

Descripción:

Pequeña biblioteca de JavaScript para informar de la actividad del usuario en el navegador (ausente, inactivo, sin mirar la página web, en una pestaña diferente, etc.). que es independiente de cualquier otra biblioteca de javascript como jquery.

Los usuarios de Visual Studio pueden obtenerlo de NuGet de la siguiente manera: PM> Install-Package Idle.js

Aquí hay una implementación aproximada de jQuery 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.
   }

})

Similar a la solución de Iconic anterior (con evento personalizado jQuery) ...

// use jquery-idle-detect.js script below
$(window).on('idle:start', function(){
  //start your prefetch etc here...
});

$(window).on('idle:stop', function(){
  //stop your prefetch etc here...
});

//jquery-idle-detect.js
(function($,$w){
  // expose configuration option
  // idle is triggered when no events for 2 seconds
  $.idleTimeout = 2000;

  // currently in idle state
  var idle = false;

  // handle to idle timer for detection
  var idleTimer = null;

  //start idle timer and bind events on load (not dom-ready)
  $w.on('load', function(){
    startIdleTimer();
    $w.on('focus resize mousemove keyup', startIdleTimer)
      .on('blur',idleStart) //force idle when in a different tab/window
      ;
  ]);

  function startIdleTimer() {
    clearTimeout(idleTimer); //clear prior timer

    if (idle) $w.trigger('idle:stop'); //if idle, send stop event
    idle = false; //not idle

    var timeout = ~~$.idleTimeout; // option to integer
    if (timeout <= 100) timeout = 100; // min 100ms
    if (timeout > 300000) timeout = 300000; // max 5 minutes

    idleTimer = setTimeout(idleStart, timeout); //new timer
  }

  function idleStart() {
    if (!idle) $w.trigger('idle:start');
    idle = true;
  }

}(window.jQuery, window.jQuery(window)))

Puedes hacerlo más elegantemente con guión bajo y jquery -

$('body').on("click mousemove keyup", _.debounce(function(){
    // do preload here
}, 1200000)) // 20 minutes debounce

Mi respuesta se inspiró en la respuesta de vijay , pero es una solución más corta y más general que pensé que compartiría con cualquiera que pudiera ayudar.

(function () { 
    var minutes = true; // change to false if you'd rather use seconds
    var interval = minutes ? 60000 : 1000; 
    var IDLE_TIMEOUT = 3; // 3 minutes in this example
    var idleCounter = 0;

    document.onmousemove = document.onkeypress = function () {
        idleCounter = 0;
    };

    window.setInterval(function () {
        if (++idleCounter >= IDLE_TIMEOUT) {
            window.location.reload(); // or whatever you want to do
        }
    }, interval);
}());

Tal como está actualmente, este código se ejecutará inmediatamente y volverá a cargar su página actual después de 3 minutos sin mover el mouse o presionar las teclas.

Esto utiliza JavaScript simple y una expresión de función invocada de inmediato para manejar los tiempos de espera inactivos de una manera limpia y autónoma.

Sé que es una pregunta relativamente antigua, pero tuve el mismo problema y encontré una solución bastante buena.

Solía: jquery.idle y solo tenía que hacer:

$(document).idle({
  onIdle: function(){
    alert('You did nothing for 5 seconds');
  },
  idle: 5000
})

Ver demostración de JsFiddle .

(Solo para información: vea esto para el seguimiento de eventos de back-end Leads browserloadload )

Todas las respuestas anteriores tienen un controlador de mousemove siempre activo. Si el controlador es jQuery, el procesamiento adicional que realiza jQuery puede sumar. Especialmente si el usuario está usando un mouse para juegos, pueden ocurrir hasta 500 eventos por segundo.

Esta solución evita el manejo de cada evento de mousemove. Esto da como resultado un pequeño error de tiempo, pero que puede ajustar a su necesidad.

function setIdleTimeout(millis, onIdle, onUnidle) {
    var timeout = 0;
    startTimer();

    function startTimer() {
        timeout = setTimeout(onExpires, millis);
        document.addEventListener("mousemove", onActivity);
        document.addEventListener("keydown", onActivity);
    }

    function onExpires() {
        timeout = 0;
        onIdle();
    }

    function onActivity() {
        if (timeout) clearTimeout(timeout);
        else onUnidle();
        //since the mouse is moving, we turn off our event hooks for 1 second
        document.removeEventListener("mousemove", onActivity);
        document.removeEventListener("keydown", onActivity);
        setTimeout(startTimer, 1000);
    }
}

http://jsfiddle.net/jndxq51o/

Probablemente podría hackear algo al detectar el movimiento del mouse en el cuerpo del formulario y actualizar una variable global con el último tiempo de movimiento. Luego, necesitará tener un temporizador de intervalos en ejecución que verifique periódicamente el último tiempo de movimiento y haga algo si ha pasado suficiente tiempo desde que se detectó el último movimiento del mouse.

Escribí una pequeña clase ES6 para detectar actividad y, de lo contrario, disparar eventos en tiempo de inactividad. Cubre el teclado, el mouse y el tacto , se puede activar y desactivar y tiene una API muy delgada:

const timer = new IdleTimer(() => alert('idle for 1 minute'), 1000 * 60 * 1);
timer.activate();

No , no depende de jQuery, aunque puede que tenga que ejecutar a través de Babel para soportar los navegadores antiguos.

https://gist.github.com/4547ef5718fd2d31e5cdcafef0208096

Podría lanzarlo como un paquete npm una vez que reciba algunos comentarios.

Si está apuntando a un navegador compatible (Chrome o Firefox a partir de diciembre de 2018), puede experimentar con requestIdleCallback e incluir el calzo requestIdleCallback para navegadores no compatibles.

Prueba este código, funciona perfectamente.

var IDLE_TIMEOUT = 10; //seconds
var _idleSecondsCounter = 0;

document.onclick = function () {
    _idleSecondsCounter = 0;
};

document.onmousemove = function () {
    _idleSecondsCounter = 0;
};

document.onkeypress = function () {
    _idleSecondsCounter = 0;
};

window.setInterval(CheckIdleTime, 1000);

function CheckIdleTime() {
    _idleSecondsCounter++;
    var oPanel = document.getElementById("SecondsUntilExpire");
    if (oPanel)
        oPanel.innerHTML = (IDLE_TIMEOUT - _idleSecondsCounter) + "";
    if (_idleSecondsCounter >= IDLE_TIMEOUT) {
        alert("Time expired!");
        document.location.href = "SessionExpired.aspx";
    }
}

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

    //Zero the idle timer on mouse movement.
    $('body').mousemove(function (e) {
     //alert("mouse moved" + idleTime);
     idleTime = 0;
    });

    $('body').keypress(function (e) {
      //alert("keypressed"  + idleTime);
        idleTime = 0;
    });



    $('body').click(function() {
      //alert("mouse moved" + idleTime);
       idleTime = 0;
    });

});

function timerIncrement() {
    idleTime = idleTime + 1;
    if (idleTime > 10) { // 10 minutes

        window.location.assign("http://www.google.com");
    }
}
</script> 

¡Creo que este código jquery es perfecto, aunque copiado y modificado de las respuestas anteriores! ¡no olvide incluir la biblioteca jquery en su archivo!

El problema con todas estas soluciones, aunque es correcto, no es práctico, cuando se tiene en cuenta el conjunto valioso de tiempo de espera de la sesión, utilizando PHP, .NET o en el archivo Application.cfc para desarrolladores de Coldfusion. El tiempo establecido por la solución anterior debe sincronizarse con el tiempo de espera de la sesión del lado del servidor. Si los dos no se sincronizan, puede encontrarse con problemas que frustrarán y confundirán a sus usuarios. Por ejemplo, el tiempo de espera de la sesión del lado del servidor puede establecerse en 60 minutos, pero el usuario puede creer que está seguro, porque la captura de tiempo inactivo de JavaScript ha aumentado la cantidad total de tiempo que un usuario puede pasar en una sola página. El usuario puede haber pasado tiempo completando un formulario largo y luego va a enviarlo. El tiempo de espera de la sesión puede comenzar antes de que se procese el envío del formulario. Tiendo a darles a mis usuarios 180 minutos, y luego use JavaScript para desconectar automáticamente al usuario. Esencialmente, usando parte del código anterior, para crear un temporizador simple, pero sin la parte de captura del evento del mouse. De esta manera, el tiempo del lado del cliente y del servidor se sincroniza perfectamente. No hay confusión, si muestra el tiempo al usuario en su interfaz de usuario, ya que se reduce. Cada vez que se accede a una nueva página en el CMS, se restablecen la sesión del lado del servidor y el temporizador de JavaScript. Simple y elegante Si un usuario permanece en una sola página durante más de 180 minutos, en primer lugar, creo que hay algo mal con la página. como se reduce Cada vez que se accede a una nueva página en el CMS, se restablecen la sesión del lado del servidor y el temporizador de JavaScript. Simple y elegante Si un usuario permanece en una sola página durante más de 180 minutos, en primer lugar, creo que hay algo mal con la página. como se reduce Cada vez que se accede a una nueva página en el CMS, se restablecen la sesión del lado del servidor y el temporizador de JavaScript. Simple y elegante Si un usuario permanece en una sola página durante más de 180 minutos, en primer lugar, creo que hay algo mal con la página.

JavaScript puro con tiempo de restablecimiento y enlaces configurados correctamente a través de addEventListener

(function() {

  var t,
    timeout = 5000;

  function resetTimer() {
    console.log("reset: " + new Date().toLocaleString());
    if (t) { 
      window.clearTimeout(t); 
    }
    t = window.setTimeout(logout, timeout);
  }

  function logout() {
    console.log("done: " + new Date().toLocaleString());
  }
  resetTimer();

  //And bind the events to call `resetTimer()`
  ["click", "mousemove", "keypress"].forEach(function(name) {
    console.log(name);
    document.addEventListener(name, resetTimer);
  });

}());

(Parcialmente inspirado por la buena lógica central de Equiman anteriormente en este hilo).

sessionExpiration.js

sessionExpiration.js es ligero pero efectivo y personalizable. Una vez implementado, use en una sola fila:

sessionExpiration(idleMinutes, warningMinutes, logoutUrl);

• Afecta a todas las pestañas del navegador, no solo a una.
• Escrito en JavaScript puro , sin dependencias. Completamente del lado del cliente.
• (Si así lo desea). Tiene un banner de advertencia y un reloj de cuenta regresiva , que se cancela por la interacción del usuario.
• Simplemente incluya sessionExpiration.js y llame a la función, con argumentos [1] número de minutos inactivos (en todas las pestañas) hasta que el usuario cierre la sesión, [2] número de minutos inactivos hasta que se muestre la advertencia y la cuenta regresiva, y [3] URL de cierre de sesión.
• Ponga el CSS en su hoja de estilo. Personalízalo si quieres. (O saltee y elimine el banner si no lo desea).
• Si haces desea que el mensaje de advertencia sin embargo, entonces debe poner div vacío con ID sessExpirDiv en su página (una sugerencia es ponerlo en el pie de página) .
• Ahora el usuario cerrará sesión automáticamente si todas las pestañas han estado inactivas durante el tiempo dado.
• Opcional: puede proporcionar un cuarto argumento (URL serverRefresh) a la función, de modo que un temporizador de sesión del lado del servidor también se actualice cuando interactúa con la página.

Este es un ejemplo de cómo se ve en acción, si no cambia el CSS.

Escribí un simple complemento jQuery que hará lo que estás buscando.

https://github.com/afklondon/jquery.inactivity

$(document).inactivity( {
    interval: 1000, // the timeout until the inactivity event fire [default: 3000]
    mouse: true, // listen for mouse inactivity [default: true]
    keyboard: false, // listen for keyboard inactivity [default: true]
    touch: false, // listen for touch inactivity [default: true]
    customEvents: "customEventName", // listen for custom events [default: ""]
    triggerAll: true, // if set to false only the first "activity" event will be fired [default: false]
});

El script escuchará la inactividad del mouse, el teclado, el tacto y otros eventos personalizados (inactivo) y activará eventos globales de "actividad" e "inactividad".

Espero que esto ayude :)

Solo unos pocos pensamientos, una avenida o dos para explorar.

¿Es posible ejecutar una función cada 10 segundos y hacer que verifique una variable "contador"? Si eso es posible, puede tener un mouseover para la página, ¿no? Si es así, use el evento mouseover para restablecer la variable "contador". Si se llama a su función y el contador está por encima del rango predeterminado, realice su acción.

De nuevo, solo algunos pensamientos ... Espero que ayude.

He probado este archivo de trabajo de código:

var timeout = null;
    var timee = '4000'; // default time for session time out.
    $(document).bind('click keyup mousemove', function(event) {

    if (timeout !== null) {
            clearTimeout(timeout);
        }
        timeout = setTimeout(function() {
              timeout = null;
            console.log('Document Idle since '+timee+' ms');
            alert("idle window");
        }, timee);
    });

Aquí está la mejor solución que he encontrado: http://css-tricks.com/snippets/jquery/fire-event-when-user-is-idle/

Aquí está el JS:

idleTimer = null;
idleState = false;
idleWait = 2000;

(function ($) {

    $(document).ready(function () {

        $('*').bind('mousemove keydown scroll', function () {

            clearTimeout(idleTimer);

            if (idleState == true) { 

                // Reactivated event
                $("body").append("<p>Welcome Back.</p>");            
            }

            idleState = false;

            idleTimer = setTimeout(function () { 

                // Idle Event
                $("body").append("<p>You've been idle for " + idleWait/1000 + " seconds.</p>");

                idleState = true; }, idleWait);
        });

        $("body").trigger("mousemove");

    });
}) (jQuery)

Puede usar la solución mencionada a continuación

var idleTime;
$(document).ready(function () {
         reloadPage();
        $('html').bind('mousemove click mouseup mousedown keydown keypress keyup submit change mouseenter scroll resize dblclick', function () {
            clearTimeout(idleTime);
            reloadPage();
        });
});
function reloadPage() {
    clearTimeout(idleTime);
    idleTime = setTimeout(function () {
        location.reload();
    }, 3000);
}

Utilizo este enfoque, ya que no es necesario restablecer constantemente la hora en que se dispara un evento, en su lugar solo registramos la hora, esto genera el punto de inicio inactivo.

           function idle(WAIT_FOR_MINS, cb_isIdle) {
            var self = this, 
                idle,
                ms = (WAIT_FOR_MINS || 1) * 60000,
                lastDigest = new Date(),
                watch;
            //document.onmousemove = digest;
            document.onkeypress = digest;
            document.onclick = digest;

            function digest() {
               lastDigest = new Date(); 
            }
            // 1000 milisec = 1 sec
            watch = setInterval(function(){
                if (new Date() - lastDigest > ms && cb_isIdel) {
                    clearInterval(watch);
                    cb_isIdle();
                }

            }, 1000*60);    
        },

Probablemente podría detectar la inactividad en su página web utilizando los trucos de mousemove enumerados, pero eso no le dirá que el usuario no está en otra página en otra ventana o pestaña, o que el usuario está en Word o Photoshop, o WOW y simplemente no está mirando tu página en este momento. En general, solo haría la captación previa y confiaría en la multitarea del cliente. Si realmente necesita esta funcionalidad, puede hacer algo con un control ActiveX en Windows, pero en el mejor de los casos es feo.

Aquí hay un servicio AngularJS para lograr en Angular.

/* Tracks now long a user has been idle.  secondsIdle can be polled 
   at any time to know how long user has been idle. */
fuelServices.factory('idleChecker',['$interval', function($interval){
    var self = {
        secondsIdle: 0,
        init: function(){
            $(document).mousemove(function (e) {
                self.secondsIdle = 0;
            });
            $(document).keypress(function (e) {
                self.secondsIdle = 0;
            });
            $interval(function(){
                self.secondsIdle += 1;
            }, 1000)
        }
    }
    return self;
}]);

Tenga en cuenta que este verificador inactivo se ejecutará para todas las rutas, por lo que debe inicializarse .run()al cargar la aplicación angular. Luego puede usar idleChecker.secondsIdledentro de cada ruta.

myApp.run(['idleChecker',function(idleChecker){
    idleChecker.init();
}]);

Debounce en realidad es una gran idea! Aquí la versión para proyectos gratuitos de jQuery:

const derivedLogout = createDerivedLogout(30);
derivedLogout(); // it could happen that user too idle)
window.addEventListener('click', derivedLogout, false);
window.addEventListener('mousemove', derivedLogout, false);
window.addEventListener('keyup', derivedLogout, false); 

function createDerivedLogout (sessionTimeoutInMinutes) {
    return _.debounce( () => {
        window.location = this.logoutUrl;
    }, sessionTimeoutInMinutes * 60 * 1000 ) 
}

Tan simple como puede ser, detecte cuando el mouse solo se mueve:

var idle = false;

document.querySelector('body').addEventListener('mousemove', function(e) {
    if(idle!=false)idle = false;
});

var idleI = setInterval(function()
{   
    if(idle == 'inactive')
    {
        return;
    }

    if(idle == true)
    {
        idleFunction();
        idle = 'inactive';
        return;
    }

    idle = true;
}, 30000);// half the expected time, idle will trigger after 60s in this case.

function idleFuntion()
{
   console.log('user is idle');
}

Bueno, puede adjuntar un evento de clic o movimiento del mouse al cuerpo del documento que restablece un temporizador. Tenga una función que llame a intervalos programados que verifique si el temporizador ha superado un tiempo específico (como 1000 milis) y comience su precarga.

Javascript no tiene forma de decir el uso de la CPU. Esto rompería el sandbox que se ejecuta JavaScript en su interior.

Aparte de eso, conectar los eventos onmouseover y onkeydown de la página probablemente funcionaría.

También puede establecer el uso de setTimeout en el evento onload para programar una función que se llamará después de un retraso.

// Call aFunction after 1 second
window.setTimeout(aFunction, 1000);