Manejo de Tiempo de Espera en JavaScript
En el mundo de la programación, más específicamente, en el lenguaje
JavaScript, entre las diversas situaciones que un desarrollador puede encontrar se
encuentra la necesidad de detener un tiempo de espera.
Este puede surgir en diferentes circunstancias y es por eso que es de vital importancia
conocer cómo abordarlo correctamente.
¿Qué es un Timeout en JavaScript?
Los tiempos de espera o timeouts son ampliamente usados en JavaScript para pausar la
ejecución de cualquier bloque de código dentro de un período de tiempo especificado. Básicamente es
como decirle a su script que tome un respiro antes de pasar al siguiente paso de sus instrucciones.
¿Cómo detener un Timeout en ejecución en JavaScript?
Para detener un timeout en JavaScript, debemos hacer uso de la función
clearTimeout(). Esta función ofrece una interfaz simple para la manipulación de los
temporizadores que se establecen con setTimeout().
let tiempoEspera ;
function iniciarTemporizador (){
tiempoEspera = setTimeout(()=>{
console.log("Tiempo de espera inicializado");
},3000);
}
function pararTemporizador(){
clearTimeout(tiempoEspera);
console.log("Tiempo de espera detenido");
}
Como se puede observar en el código anterior, primero se ha inicializado un timeout a
través de la función setTimeout(). Luego, gracias a la función
clearTimeout() se ha detenido dicho tiempo de espera.Si ejecutamos la función
pararTemporizador() antes de que se hayan completado los 3 segundos seteados en
setTimeout(), la frase “Tiempo de espera inicializado” no se imprimirá en la
consola.
Implementando clearTimeout() en situaciones reales
Ahora que hemos comprendido la lógica básica de cómo detener un tiempo de espera en
JavaScript, podemos avanzar y ver cómo se puede implementar en los escenarios reales.
Supongamos que estamos construyendo un sitio web en el que necesitamos mostrar un mensaje de alerta
a los usuarios después de algún tiempo de inactividad. Pero si el usuario realiza cualquier acción
antes de que aparezca el mensaje, queremos cancelar el mensaje. Esto es exactamente donde
clearTimeout() entra en acción.
const alertaInactividad = setTimeout(()=>{
alert("Ha estado inactivo durante un tiempo");
},5000);
document.addEventListener('mousemove',()=>{
clearTimeout(alertaInactividad);
});
En este código, después de 5 segundos de inactividad se mostrará una alerta al usuario. Si el usuario mueve el mouse antes de que se active la alerta, el evento ‘mousemove’ será activado y la función clearTimeout() detendrá el timeout. Al controlar la ejecución de tiempos de espera en este escenario, podemos mejorar la experiencia del usuario y mantenerlo más tiempo en nuestro sitio web.
element.textContent = 'Copiado'; setTimeout(() => { element.textContent = 'Copiar'; }, 2000); }