Como adicionar um delay em um loop de JavaScript

Neste artigo você vai aprender a como adicionar um delay em um loop de JavaScript, através de uma simples abordagem

Fala programador(a), beleza? Bora aprender mais sobre loops e JavaScript!

Em JS temos a função setTimeout para adicionar um intervalo de tempo entre nossas ações

Vamos utilizá-la para obter o que precisamos resolver neste artigo

Se adicionarmos a instrução diretamente a um loop o que acontece é que o primeiro intervalo é respeitado, mas os demais não

Pois a função setTimeout não bloqueia as próximas execuções, somente as atrasa

Então após o primeiro delay as próximas serão executadas imediatamente, por isso um loop com setTimeout não funciona

O que podemos fazer então? Utilizar async e await!

Veja um exemplo prático:

const timer = (seconds) =>  {
	let time = seconds * 1000
	return new Promise(res => setTimeout(res, time))
}

async function doSomething() {
  for (var i = 0; i < 10; i++) {
    console.log("Looping... " + i);
    await timer(2);
  }
}

doSomething();

Vamos entender o que acontece no código acima!

Primeiramente é criada a função que vai receber um tempo em segundos e vai esperar para executar as próximas linhas de código

Multiplicamos por 1000, pois a unidade de medida de setTimeout é milisegundos

A instrução de Promise faz com que o código seja totalmente executado para a próxima execução ocorrer

A segunda função é a que contém o async e await

Onde executamos o loop com o timer, que recebe a função que criamos anteriormente

Neste caso o loop faz 10 execuções e aguarda 2 segundos entre cada uma delas

Conclusão

Neste artigo você vai aprender a como adicionar um delay em um loop de JavaScript

Criamos uma função que adiciona uma Promise para esperar o código ser totalmente executado

A segunda função que aplica o loop, contém o async e await para esperar a função da Promise ser executada

E assim conseguimos pausar um tempo o código entre uma execução do loop e outra

Confira nossos cursos gratuitos no Youtube, com vídeos todos os dias! Se inscreva e ative o sininho para receber as notificações e aprender mais ainda sobre desenvolvimento web!

Veja também nosso catálogo de cursos na Udemy, todos com exercícios e projetos práticos, nas mais diversas tecnologias. O link acima contém um cupom de desconto para os cursos!