Cómo programar tareas con setTimeout() y setInterval() en JavaScript

Introducción

Tanto setTimeout()y setInterval()son métodos integrados del objeto global en el Modelo de objetos de documento para programar tareas en un momento determinado. setTimeout()llama a una función pasada una vez después de un retraso especificado, mientras que setInterval()invoca una función de forma continua en un momento designado. Como JavaScript es un lenguaje de un solo subproceso, ambos métodos permiten que su código se ejecute de forma asincrónica.

En este artículo, aprenderá cómo implementar setTimeout()y setInterval()en su proyecto de JavaScript.

AplicandosetTimeout()

El setTimeout()método acepta dos argumentos: una función de devolución de llamada y un retraso en milisegundos, y llama a la función una vez.

En su index.jsarchivo, implemente un setTimeout()método y pase una función anónima como primer argumento y un número en milisegundos como segundo argumento:

índice.js

setTimeout(() = {  console.log('Hello World!');}, 1000);

Después de un retraso de 1000milisegundos (que equivale a un segundo), la consola imprimirá la cadena Hello World!.

También puedes definir una función globalmente y pasarla setTimeout()como primer argumento.

En su index.jsarchivo, defina una función en el espacio global y pase la etiqueta de la función dentro del setTimeout()método:

índice.js

function greeting() {  console.log('Hello World!');}setTimeout(greeting, 1000);

Después de un retraso de un segundo, la consola cerrará la sesión de la cadena Hello World!.

Nota: No debe invocar la función que pasa a setTimeout(). En su lugar, inserte la etiqueta de la función como primer argumento.

El setTimeout()método puede tomar argumentos adicionales y opcionales y pasarlos a la función de devolución de llamada después del retraso especificado. En su index.jsarchivo, aplique argumentos adicionales a su setTimeout()método:

índice.js

function animal(animalName, punctuation = '.') {  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);  console.log(`${name}`${punctuation});}setTimeout(animal, 2500, 'shark', '!');

Después de 2,5 segundos, la consola imprimirá el mensaje. Shark!El argumento adicional en su setTimeout()método anula el argumento predeterminado en la animalfunción de devolución de llamada.

Ahora que ha revisado el setTimeout()método, veamos otra forma de crear llamadas asincrónicas en JavaScript.

AplicandosetInterval()

De manera similar a setTimeout(), el setInterval()método acepta dos argumentos: una función de devolución de llamada y un retraso en milisegundos. El método también acepta argumentos adicionales para pasar a la función de devolución de llamada. La diferencia es que el método setInterval()invoca la función de devolución de llamada regularmente con un retraso especificado entre llamadas.

En su index.jsarchivo, defina una función que incremente un número y registre el valor:

índice.js

let i = 0;function increment() {  i++;  console.log(i);}setInterval(increment, 1000);

La incrementfunción de devolución de llamada pasada a su setInterval()método ejecutará su código repetidamente cada segundo e imprimirá cada número sucesivo en la consola.

Output123...

Como setInterval()se aplica un retraso para cada llamada sucesiva a la función de devolución de llamada, consideremos cuándo usar el método over setTimeout().

Usando setTimeout()recursivamente

Para tener más control sobre la definición del inicio de los retrasos especificados, puede utilizar el setTimeout()método de forma recursiva en lugar de setInterval(). El enfoque recursivo setTimeout()permite que sus tareas tengan control total sobre cuándo comienza el retraso.

En su index.jsarchivo, defina una función que incremente un número y aplique un setTimeout()método recursivo:

índice.js

let i = 0;function increment() {  i++;  console.log(i);}let timer = setTimeout(function myTimer() {  increment();  timer = setTimeout(myTimer, 1000);}, 1000);

Observe cómo define una función de devolución de llamada myTimerdentro del cuerpo de la primera invocación del setTimeout()método. La variable timerreasigna su valor a una segunda llamada del setTimeout()método y crea un enfoque recursivo al invocar el método y pasar la myTimerfunción como primer argumento. Con cada llamada recursiva, la consola registrará un número incrementado sin demora, ya que ambos setTimeout()métodos tienen un segundo argumento de 1000.

Ahora que ha analizado los enfoques para integrar ambos métodos, examinemos cómo finalizar una llamada.

Usando clearTimeout()yclearInterval()

Para cancelar un setTimeout()método, puedes recurrir al clearTimeout()método que se pasa dentro del cuerpo de tu setTimeout()llamada. El clearTimeout()método acepta una función de devolución de llamada como argumento.

En su index.jsarchivo, defina una función y pase el clearTimeout()método dentro del cuerpo de su llamada a setTimeout():

índice.js

function animal(animalName, punctuation = '.') {  const name = animalName.charAt(0).toUpperCase() + animalName.slice(1);  console.log(`${name}${punctuation}`);}const animalTimer = setTimeout(animal, 800, 'shark', '!');setTimeout(() = {  clearTimeout(animalTimer);}, 250);

La variable animalTimerasigna su valor a una llamada al setTimeout()método con su animalfunción como devolución de llamada y un segundo argumento con un retraso de 800milisegundos.

La segunda llamada al setTimeout()método acepta el clearTimeout()método dentro del cuerpo de una función anónima y un retraso de 250milisegundos. A medida que configura el clearTimeout()método, no se registrará ningún valor en la consola, ya que tanto la llamada al método como el retraso de 250milisegundos cancelan el valor en la animalTimervariable. Si aumenta la cantidad de milisegundos dentro de la segunda llamada al setTimeout()método, se registrarán valores en la consola y se finalizará una instancia una vez que se cumpla el retraso.

Para cancelar un setInterval()método, puedes aplicar el clearInterval()método. De manera similar a clearTimeout(), el clearInterval()método acepta una función de devolución de llamada como argumento.

En su index.jsarchivo, utilice el clearTimeout()método dentro del cuerpo de su llamada para setInterval():

índice.js

let i = 0;function increment() {  i++;  console.log(i);}const incrementTimer = setInterval(increment, 1000);setInterval(() = {  clearInterval(incrementTimer);}, 3000)

Aquí, la variable incrementTimer()almacena una llamada a setInterval()como su valor. La segunda llamada a su setInterval()método define una función anónima y establece un retraso de 3000milisegundos. La llamada también pasa el clearInterval()método con la incrementTimervariable como argumento. Después de 3000milisegundos, la consola registrará los valores incrementados y el setInterval()método finalizará una vez que se cumpla el retraso.

Conclusión

En este artículo, aprendió que a medida que JavaScript lee el código línea por línea, los métodos setTimeout()y setInterval()le brindan una solución para ejecutar su código de forma asincrónica y programar sus llamadas de función a su discreción.

setInterval()se ejecutará continuamente durante un período de tiempo especificado. setTimeout()Se ejecuta una vez, pero se puede usar de forma recursiva para esperar una devolución de llamada que indique cuándo debe esperar para ejecutarse nuevamente. El enfoque recursivo es útil para situaciones que requieren garantizar que una tarea que puede tardar más que el retraso finalice antes de volver a ejecutarse.