Los programadores utilizan eventos de temporización para retrasar la ejecución de cierto código o para repetir el código en un intervalo específico.
Hay dos funciones nativas en la biblioteca de JavaScript que se utilizan para realizar estas tareas: setTimeout()y setInterval().
setTimeout
setTimeout() se utiliza para retrasar la ejecución de la función pasada por un período de tiempo específico.
Hay dos parámetros a los que pasa setTimeout(): la función que desea llamar y la cantidad de tiempo en milisegundos para retrasar la ejecución de la función.
Recuerde que hay 1000 milisegundos (ms) en 1 segundo, por lo que 5000 ms es igual a 5 segundos.
setTimeout() ejecutará la función desde el primer argumento una vez después de que haya transcurrido el tiempo especificado.
Ejemplo:
let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); }Cuando delayTimerse llame a la función, se ejecutará setTimeout. Después de 3 segundos (3000 ms), se ejecutará delayedFunctiony enviará una alerta.
setInterval
Úselo setInterval()para especificar una función para que se repita con un retraso de tiempo entre ejecuciones.
Nuevamente, se pasan dos parámetros a setInterval(): la función que desea llamar y la cantidad de tiempo en milisegundos para retrasar cada llamada de la función.
setInterval() continuará ejecutándose hasta que se borre.
Ejemplo:
let intervalID; function repeatEverySecond() { intervalID = setInterval(sendMessage, 1000); } function sendMessage() { console.log(“One second elapsed.”); }Cuando su código llame a la función repeatEverySecond, se ejecutará setInterval. setIntervalejecutará la función sendMessagecada segundo (1000 ms).
clearTimeout y clearInterval
También hay funciones nativas correspondientes para detener los eventos de temporización: clearTimeout()y clearInterval().
Es posible que haya notado que cada función de temporizador anterior se guarda en una variable. Cuando se ejecuta la función setTimeouto setInterval, se le asigna un número que se guarda en esta variable. Tenga en cuenta que JavaScript hace todo esto en segundo plano.
Este número generado es único para cada instancia de temporizadores. Este número asignado también es la forma en que se identifican los temporizadores cuando desea detenerlos. Por esta razón, siempre debe configurar su temporizador en una variable.
Para mayor claridad de su código, siempre debe coincidir clearTimeout()con setTimeout()y clearInterval()con setInterval().
Para detener un temporizador, llame a la función de borrado correspondiente y pásele la variable de ID del temporizador que coincida con el temporizador que desea detener. La sintaxis de clearInterval()y clearTimeout()es la misma.
Ejemplo:
let timeoutID; function delayTimer() { timeoutID = setTimeout(delayedFunction, 3000); } function delayedFunction() { alert(“Three seconds have elapsed.”); } function clearAlert() { clearTimeout(timeoutID); }