Escritura demorada
La escritura demorada en JavaScript se refiere a la ejecución de código después de un período de tiempo específico. Esto se logra utilizando funciones como setTimeout() y setInterval(). Estas funciones permiten programar la ejecución de código de manera asíncrona, es decir, después de un retraso determinado o a intervalos regulares.
1. 1. setTimeout() #
setTimeout() es una función que se utiliza para ejecutar un bloque de código o una función después de un retraso especificado en milisegundos.
Sintaxis:
1setTimeout(función, retraso);
función: Es la función que se ejecutará después del retraso.retraso: Es el tiempo en milisegundos antes de que se ejecute la función.
Ejemplo:
1console.log("Hola"); 2 3setTimeout(() => { 4 console.log("Esto se muestra después de 2 segundos"); 5}, 2000); 6 7console.log("Adiós");Salida de consola Hola Adiós Esto se muestra después de 2 segundos
En este ejemplo:
Holase imprime inmediatamente.- Después de 2 segundos (2000 milisegundos), se ejecuta la función dentro de
setTimeout, que imprimeEsto se muestra después de 2 segundos. Adiósse imprime inmediatamente después deHola, antes de que el retraso termine.
setInterval() #
setInterval() es similar a setTimeout(), pero en lugar de ejecutarse solo una vez después del retraso, la función se ejecuta repetidamente en intervalos regulares.
Sintaxis:
1setInterval(función, intervalo);
función: Es la función que se ejecutará repetidamente.intervalo: Es el tiempo en milisegundos entre cada ejecución de la función.
Ejemplo:
1setInterval(() => { 2 console.log("Esto se muestra cada 3 segundos"); 3}, 3000);
En este ejemplo:
- La función se ejecuta cada 3 segundos, imprimiendo
Esto se muestra cada 3 segundosrepetidamente.
Detener la Escritura Demorada #
- Para detener un
setTimeout()antes de que se ejecute, se puede usarclearTimeout(id)dondeides el valor devuelto porsetTimeout(). - Para detener un
setInterval(), se usaclearInterval(id)dondeides el valor devuelto porsetInterval().
Ejemplo de clearTimeout():
1let timeoutID = setTimeout(() => { 2 console.log("Esto nunca se mostrará"); 3}, 5000); 4 5clearTimeout(timeoutID);Salida de consola
Ejemplo de clearInterval():
1let intervalID = setInterval(() => { 2 console.log("Esto se mostraría cada 2 segundos"); 3}, 2000); 4 5clearInterval(intervalID);Salida de consola
Resumen del tema
Conceptos clave #
- Temporizadores Asíncronos (Web APIs / Timers):
setTimeout(callback, ms): programa la ejecución única de un callback tras un retardo mínimo en milisegundos.setInterval(callback, ms): programa ejecuciones periódicas reiteradas cada intervalo especificado.
- Cancelación de Temporizadores:
clearTimeout(id): anula un timeout programado antes de su disparo.clearInterval(id): detiene el ciclo de repetición del intervalo.
- Comportamiento en el Event Loop: los temporizadores se colocan en la cola de macrotareas (Macrotask Queue) y se ejecutan cuando la pila de llamadas queda libre.
Qué debes recordar #
Usa setTimeout para ejecuciones diferidas y setInterval para acciones periódicas, guardando siempre sus identificadores para poder cancelarlos con clearTimeout/clearInterval.