Cómo detectar el tiempo de inactividad en JavaScript
¿Es posible detectar el tiempo " inactivo " en JavaScript?
Mi caso de uso principal probablemente sería buscar o cargar previamente contenido.
Defino el tiempo de inactividad como un período de inactividad del usuario o sin uso de CPU.
Aquí hay un script simple que usa jQuery y maneja eventos de movimiento del mouse y pulsación de 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>
Con JavaScript básico:
var inactivityTime = function () {
var time;
window.onload = resetTimer;
// DOM Events
document.onmousemove = resetTimer;
document.onkeydown = 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 inicialice 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.onkeydown = resetTimer; // onkeypress is deprectaed
document.addEventListener('scroll', resetTimer, true); // improved; see comments
O registre los eventos deseados usando 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 utilizar window, o documentsegún sus necesidades. Aquí puedes ver las diferencias entre ellos: ¿ Cuál es la diferencia entre ventana, pantalla y documento en JavaScript?
Código actualizado con @frank-conijn y @daxchen mejorado: window.onscrollno se activará si el desplazamiento se realiza dentro de un elemento desplazable, porque los eventos de desplazamiento no aparecen. En 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 (original) :
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.ontouchmove = resetTimer; // required by some devices
window.onclick = resetTimer; // catches touchpad clicks as well
window.onkeydown = 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 relacionadas con la detección de actividad y el cambio de documenta window, este script en realidad llama a la función, en lugar de dejarla inactiva.
No detecta el uso cero de la CPU directamente, pero eso es imposible, porque la ejecución de una función provoca el uso de la CPU. Y la inactividad del usuario eventualmente conduce a un uso nulo de la CPU, por lo que indirectamente detecta un uso nulo de la CPU.
