"Si un trabajador quiere hacer bien su trabajo, primero debe afilar sus herramientas." - Confucio, "Las Analectas de Confucio. Lu Linggong"
Página delantera > Programación > ¿Cómo puedo detectar el tiempo de inactividad del usuario en JavaScript?

¿Cómo puedo detectar el tiempo de inactividad del usuario en JavaScript?

Publicado el 2024-12-21
Navegar:302

How Can I Detect User Idle Time in JavaScript?

Detección del tiempo de inactividad en JavaScript

Introducción:

En el desarrollo web, comprender la actividad del usuario es crucial para optimizar el rendimiento y proporcionar una mejor experiencia de usuario. Detectar el tiempo de inactividad, definido como un período de inactividad o bajo uso de CPU, puede ayudarle a desencadenar acciones como precargar contenido o autenticación de usuario.

Implementación de JavaScript:

Para detectar tiempo de inactividad en JavaScript, puede utilizar el siguiente enfoque básico de JavaScript:

Fragmento de código:

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

Uso:

Para inicializar la detección de tiempo de inactividad, llame a la función inactivityTime() después de que la página se haya cargado:

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

Personalización:

Puedes agregar más eventos DOM para monitorear la actividad del usuario. Algunos de los eventos 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

Para una mejor personalización, puede usar una matriz para registrar múltiples eventos:

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

Al personalizar los eventos que monitorea, puede adaptar la detección del tiempo de inactividad para satisfacer las necesidades específicas de su aplicación.

Último tutorial Más>

Descargo de responsabilidad: Todos los recursos proporcionados provienen en parte de Internet. Si existe alguna infracción de sus derechos de autor u otros derechos e intereses, explique los motivos detallados y proporcione pruebas de los derechos de autor o derechos e intereses y luego envíelos al correo electrónico: [email protected]. Lo manejaremos por usted lo antes posible.

Copyright© 2022 湘ICP备2022001581号-3