Esperar por X segundos em JavaScript

1. Utilize o setTimeout() para Esperar por X Segundos em JavaScript
2. Utilizar promises e async/await para Esperar por X Segundos em JavaScript
3. Use o loop for para implementar a função delay síncrona em JavaScript

Este tutorial irá explicar como podemos esperar x segundos antes de continuar a execução em JavaScript. Iremos implementar uma função delay(seconds) que irá bloquear o string durante x segundos. Explicaremos também as múltiplas técnicas de implementação para este atraso.

Quando falamos da implementação de uma função delay, o método mais utilizado é o assíncrono setTimeout().

Utilize o setTimeout() para Esperar por X Segundos em JavaScript

O método assíncrono setTimeout() é uma das funções de ordem superior que toma uma função de retorno como argumento, e executa essa função após o tempo de entrada. O tempo dado no parâmetro está na unidade 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

Utilizar promises e async/await para Esperar por X Segundos em JavaScript

Um método para implementar a função de atraso no contexto assíncrono é combinar o conceito async/await e o conceito promises. Podemos criar uma função de atraso que retorna um novo promises no interior, a que chamaremos o método setTimeout() com o nosso tempo de espera desejado. Depois disso, podemos chamar a essa função de delay dentro de qualquer contexto assíncrono, como quisermos.

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

A função de atraso também pode ser optimizada utilizando a sintaxe de seta no ECMAScript 6 como o exemplo seguinte:

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

Use o loop for para implementar a função delay síncrona em JavaScript

Suponhamos que não temos nenhum contexto assíncrono para utilizar a função delay() acima ou não queremos utilizar a função setTimeout(). Nesse caso, podemos implementar uma função de atraso síncrono com um laço normal for e uma classe Date() para calcular o tempo.

A implementação desta função é bastante simples. Trata-se de manter a CPU ocupada durante o período de tempo desejado. Isto é, calculando o tempo decorrido e comparando-o com o tempo de espera para que possamos continuar a execução após o mesmo.

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