JavaScript

Como adicionar um delay em um loop de JavaScript

22 de abril de 2022

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

adicionar um delay em um loop de JavaScript capa

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!

Subscribe
Notify of
guest
0 Comentários
Inline Feedbacks
View all comments
0
Would love your thoughts, please comment.x