JavaScript: cómo suspender/esperar/retrasar la ejecución del código

En este tutorial, aprenda cómo suspender/esperar/retrasar la ejecución de código con JavaScript, usando la función setTimeout().

Introducción

Retrasar la ejecución del código/simular un retraso tiene varios usos: hacer una pausa en un bucle para mostrar datos, esperar a que finalicen otros subprocesos en un entorno multiproceso (aunque esto no reemplaza la programación asincrónica adecuada) o simplemente reducir las cargas en un servidor o cliente, con sucesivas solicitudes.

{.icon aria-hidden=“true”}

Nota: Retrasar la ejecución del código se conoce coloquialmente como "dormido" o menos comúnmente como "esperando".

En esta breve guía, aprenderemos cómo esperar en JavaScript, o más bien, cómo suspender/retrasar la ejecución del código, usando la función setTimeout().

La función setTimeout()

En JavaScript estándar, podemos usar la función integrada setTimeout() para "dormir"/retrasar la ejecución del código:

1
2
3
setTimeout(function (){
  // Code to run here
}, delay)

La función setTimeout() acepta dos parámetros: una función (el código que se ejecutará cuando expire el retraso) y el retraso (en milisegundos). Luego devolverá un valor entero positivo único conocido como ID de tiempo de espera, que identifica el tiempo de espera creado.

Puede llamar a una función anónima o nombrarla antes de pasarla:

1
2
3
4
5
6
7
8
function printMessage() {
  console.log("I come from a named function!");
}

const timeout1 = setTimeout(() => {console.log("I come from an anonymous function!")}, 1000);
const timeout2 = setTimeout(printMessage, 2000);

console.log('Timeout IDs:', timeout1, timeout2)

Esto resulta en:

1
2
3
Timeout IDs:45
I come from an anonymous function!
I come from a named function!

{.icon aria-hidden=“true”}

Nota: setTimeout() es una función asíncrona: el tiempo de espera actual no pausará la ejecución del siguiente bloque de código.

Entonces, si tenemos un par de tiempos de espera, donde cada tiempo de espera llama a una función:

1
2
3
setTimeout(() => {console.log("... is 42")}, 4000);
setTimeout(() => {console.log("the universe, and everything")}, 3000);
setTimeout(() => {console.log("The meaning of life")}, 1000);

La salida sería:

1
2
3
The meaning of life
the universe, and everything
... is 42

Una vez más, las llamadas son asíncronas, no se bloquean entre sí. Los mensajes se transmiten en orden inverso porque el primer tiempo de espera es más largo que los otros dos y el segundo es más largo que el tercero.

En aras de llamar al método sleep(), puede crear un contenedor simple que simplemente delegue argumentos a la función setTimeout():

1
2
3
4
function sleep(functionToExecute, delay){
  let timeoutId = setTimeout(functionToExecute(), delay);
  return timeoutId;
}

Que puedes usar en su lugar:

1
2
3
4
5
const sayHello = () => {
  console.log('Hello, world!');
}

sleep(sayHello, 1000);

Nuestra función sleep() es solo azúcar sintáctica, en realidad no agrega nada. Por otro lado, está más en línea con otros lenguajes, la mayoría de los cuales tienen una función sleep() dedicada con ese nombre.

La función clearTimeout()

La función clearTimeout() se usa para cancelar un tiempo de espera que se creó previamente con setTimeout(), usando la ID devuelta por el tiempo de espera:

1
2
3
let myTimeoutId = setTimeout(() => {
   // do something 
})

Usando el myTimeoutId devuelto, podemos cancelar el tiempo de espera para que no se ejecute:

1
clearTimeout(myTimeoutId);

Conclusión

En esta breve guía, cubrimos cómo crear un retraso en JavaScript, cómo usar la función setTimeout() y también cómo cancelar la ejecución programada del código.