Descubre los temporizadores de JavaScript

setTimeout()

Al escribir código JavaScript, es posible que desees retrasar la ejecución de una función.

Este es el trabajo de setTimeout. Especificas una función de callback para que se ejecute más tarde y un valor que expresa cuánto tiempo después quieres que se ejecute, en milisegundos:

setTimeout(() => {
  // se ejecuta después de 2 segundos
}, 2000)
setTimeout(() => {
  // se ejecuta después de 50 milisegundos
}, 50)

Esta sintaxis define una nueva función. Puedes llamar a cualquier otra función que quieras ahí dentro, o puedes pasar el nombre de una función existente y un conjunto de parámetros:

const myFunction = (firstParam, secondParam) => {
  // hacer algo
}
// se ejecuta después de 2 segundos
setTimeout(myFunction, 2000, firstParam, secondParam)

setTimeout devuelve el id del temporizador. Generalmente no se usa, pero puedes guardar este id y borrarlo si quieres eliminar la ejecución programada de la función:

const id = setTimeout(() => {
  // debería ejecutarse después de 2 segundos
}, 2000)
// Cambié de opinión
clearTimeout(id)

Retraso cero

Si especificas un retraso de tiempo de 0, la función de retorno se ejecutará tan pronto como sea posible, pero después de la ejecución de la función actual:

setTimeout(() => {
  console.log('después ')
}, 0)
console.log(' antes ')

Este código imprimirá

antes
después

Esto es especialmente útil para evitar bloquear la CPU en tareas intensivas y permitir que se ejecuten otras funciones mientras se realiza un cálculo pesado, colocando funciones en la cola del programador.

TIP

Algunos navegadores (IE y Edge) implementan un método setImmediate() que hace exactamente la misma funcionalidad, pero no es estándar y no está disponible en otros navegadores. Pero es una función estándar en Node.js.

setInterval()

setInterval es una función similar a setTimeout, con una diferencia: en lugar de ejecutar la función de retorno una vez, la ejecutará para siempre, en el intervalo de tiempo específico que especifiques (en milisegundos):

setInterval(() => {
  // se ejecuta cada 2 segundos
}, 2000)

La función anterior se ejecuta cada 2 segundos a menos que le digas que se detenga, utilizando clearInterval, pasándole el id del intervalo que devolvió setInterval:

const id = setInterval(() => {
  // se ejecuta cada 2 segundos
}, 2000)
// Cambié de opinión
clearInterval(id)

Es común llamar a clearInterval dentro de la función de retorno de setInterval, para que determine automáticamente si debe ejecutarse de nuevo o detenerse. Por ejemplo, este código ejecuta algo a menos que App.somethingIWait tenga el valor arrived:

setTimeout recursivo

setInterval inicia una función cada n milisegundos, sin considerar cuándo finalizó la ejecución de una función.

Si una función siempre toma la misma cantidad de tiempo, todo está bien.

Tal vez la función tarde diferentes tiempos de ejecución, dependiendo de las condiciones de la red.

Y tal vez una ejecución larga se superpone con la siguiente.

Para evitar esto, puedes programar un setTimeout recursivo para que se llame cuando la función de callback termine:

const myFunction = () => {
  // hacer algo
  setTimeout(myFunction, 1000)
}
setTimeout(myFunction, 1000)

setTimeout y setInterval están disponibles en Node.js, a través del módulo Timers.

Node.js también proporciona setImmediate(), que es equivalente a usar setTimeout(() => {}, 0), principalmente utilizado para trabajar con el bucle de eventos de Node.js.