El tiempo de inactividad es el tiempo que el usuario no interactúa con una página web. Esta interacción puede ser moviendo el mouse, haciendo clic en la página o usando el teclado. Este tiempo se puede detectar para ejecutar ciertos eventos que pueden necesitar ocurrir después de un cierto período de inactividad.
Método 1: Uso de JavaScript: Para la implementación, se crean dos funciones, una es la función que reinicia el temporizador cada vez que se detecta una interacción del usuario y la otra es la función que se ejecutaría periódicamente durante el tiempo que el usuario está inactivo. La función de reinicio consta de la función setInterval() , que se utiliza para crear un nuevo intervalo que invocará repetidamente otra función. El temporizador creado se asigna a una variable que se utilizará para borrar el temporizador anterior cada vez que se vuelva a llamar a esta función en la interacción del usuario.
Esta función se invoca vinculándola a los eventos que provocan la interacción con la página. Estos incluyen métodos como onload, onmousemove, onmousedown, ontouchstart, onclick y onkeypress.
La otra función que se invocará cuando el usuario esté inactivo se puede usar para realizar un seguimiento del tiempo y realizar acciones cuando el usuario haya estado inactivo durante más tiempo. Un ejemplo de esto sería cerrar la sesión del usuario cuando está inactivo por más de un tiempo especificado.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect idle
time in JavaScript ?
</title>
</head>
<body>
<h1 style="color:green">
GeeksforGeeks
</h1>
<b>
How to detect idle time in
JavaScript elegantly?
</b>
<p>
The timer will be incremented every
second to denote the idle time.
Interaction with the mouse or
keyboard will reset and hide the timer.
</p>
<p class="timertext"
style="font-size: 1.5rem;">
You are idle for
<span class="secs"></span> seconds.
</p>
<script type="text/javascript">
let timer, currSeconds = 0;
function resetTimer() {
/* Hide the timer text */
document.querySelector(".timertext")
.style.display = 'none';
/* Clear the previous interval */
clearInterval(timer);
/* Reset the seconds of the timer */
currSeconds = 0;
/* Set a new interval */
timer =
setInterval(startIdleTimer, 1000);
}
// Define the events that
// would reset the timer
window.onload = resetTimer;
window.onmousemove = resetTimer;
window.onmousedown = resetTimer;
window.ontouchstart = resetTimer;
window.onclick = resetTimer;
window.onkeypress = resetTimer;
function startIdleTimer() {
/* Increment the
timer seconds */
currSeconds++;
/* Set the timer text
to the new value */
document.querySelector(".secs")
.textContent = currSeconds;
/* Display the timer text */
document.querySelector(".timertext")
.style.display = 'block';
}
</script>
</body>
</html>
Producción:
- Después de interactuar con la página:
- Después de no interactuar con la página:
Método 2: usar jQuery: es similar al método anterior, sin embargo, aquí no se crea un nuevo temporizador cada vez que se detecta una interacción del usuario. En su lugar, el temporizador de ejecución se restablece a 0 cada vez que se detecta la interacción del usuario. Para la implementación se crean dos funciones, una es la función que reinicia el temporizador a 0 cada vez que se detecta la interacción del usuario y la otra es la función que se ejecutaría periódicamente durante el tiempo que el usuario está inactivo.
Se define una nueva variable que representará globalmente la hora actual del temporizador inactivo.
Usando el evento document.ready(), se crea un temporizador con la función setInterval() que invoca repetidamente otra función que maneja lo que sucederá cuando el usuario esté inactivo durante un tiempo específico. La función de reinicio consiste en una declaración simple que cambiará el valor de la variable del temporizador a 0, reiniciando efectivamente el tiempo de inactividad actual. Esta función se invoca vinculándola a los eventos que provocan la interacción con la página. Estos incluyen métodos como onload, onmousemove, onmousedown, ontouchstart, onclick y onkeypress.
Ejemplo:
<!DOCTYPE html>
<html>
<head>
<title>
How to detect idle
time in JavaScript ?
</title>
<script src=
"https://code.jquery.com/jquery-3.4.1.min.js">
</script>
</head>
<body>
<h1 style="color: green">
GeeksforGeeks
</h1>
<b>
How to detect idle time in
JavaScript elegantly?
</b>
<p>
The timer will be incremented every
second to denote the idle time.
Interaction with the mouse or keyboard
will reset and hide the timer.
</p>
<p class="timertext"
style="font-size: 1.5rem;">
You are idle for
<span class="secs"></span> seconds.
</p>
<script type="text/javascript">
var currSeconds = 0;
$(document).ready(function() {
/* Increment the idle time
counter every second */
let idleInterval =
setInterval(timerIncrement, 1000);
/* Zero the idle timer
on mouse movement */
$(this).mousemove(resetTimer);
$(this).keypress(resetTimer);
});
function resetTimer() {
/* Hide the timer text */
document.querySelector(".timertext")
.style.display = 'none';
currSeconds = 0;
}
function timerIncrement() {
currSeconds = currSeconds + 1;
/* Set the timer text to
the new value */
document.querySelector(".secs")
.textContent = currSeconds;
/* Display the timer text */
document.querySelector(".timertext")
.style.display = 'block';
}
</script>
</body>
</html>
Producción:
- Después de interactuar con la página:
- Después de no interactuar con la página:
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA