Espere X segundos en JavaScript

1. Utilice el setTimeout() para esperar X segundos en JavaScript
2. Use promises y async/await para esperar X segundos en JavaScript
3. Usar el bucle for para implementar la función de delay sincrónica en JavaScript

Este tutorial explicará cómo podemos esperar x segundos antes de continuar la ejecución en JavaScript. Implementaremos una función delay(seconds) que bloqueará el hilo durante x segundos. También explicaremos múltiples técnicas de implementación para este retraso.

Cuando hablamos de implementar una función delay, el método más utilizado es el asíncrono setTimeout().

Utilice el setTimeout() para esperar X segundos en JavaScript

El método asíncrono setTimeout() es una de las funciones de orden superior que toma como argumento una función de devolución de llamada, y ejecuta esa función una vez transcurrido el tiempo de entrada. El tiempo dado en el parámetro está en la unidad de ms.

console.log('I am the first log');

setTimeout(function() {
  console.log('I am the third log after 5 seconds');
}, 5000);

console.log('I am the second log');

Resultado:

I am the first log
I am the second log
I am the third log after 5 seconds

Use promises y async/await para esperar X segundos en JavaScript

Un método para implementar la función de retardo en el contexto asíncrono es combinar el concepto de async/await y el concepto de promises. Podemos crear una función de retardo que devuelva una nueva promises dentro, que llamaremos el método setTimeout() con nuestro tiempo de espera deseado. Después de eso, podemos llamar a esa función de delay dentro de cualquier contexto asincrónico como queramos.

function delay(n) {
  return new Promise(function(resolve) {
    setTimeout(resolve, n * 1000);
  });
}

async function myAsyncFunction() {
  // Do what you want here
  console.log('Before the delay')

      await delay(5);

  console.log('After the delay')
  // Do what you want here too
}

myAsyncFunction();

Resultado:

Before the delay
After the delay

La función de retardo también puede ser optimizada usando la sintaxis de las flechas en ECMAScript 6 como el siguiente ejemplo:

const delay = (n) => new Promise(r => setTimeout(r, n * 1000));

Usar el bucle for para implementar la función de delay sincrónica en JavaScript

Supongamos que no tenemos ningún contexto asincrónico para usar la función delay() anterior o no queremos usar la función setTimeout(). En ese caso, podemos implementar una función de retardo síncrona con un bucle normal for y una clase Date() para calcular el tiempo.

La implementación de esta función es bastante simple. Se trata de mantener la CPU ocupada durante la cantidad de tiempo deseada. Esto es calculando el tiempo transcurrido y comparándolo con el tiempo de espera para que podamos continuar la ejecución después de él.

function syncDelay(milliseconds) {
  var start = new Date().getTime();
  var end = 0;
  while ((end - start) < milliseconds) {
    end = new Date().getTime();
  }
}

console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')

Resultado:

Before the delay
After the delay