Como esperar ou dormir a execução do código em JavaScript

Dormir é uma função presente na maioria das linguagens de programação e é usada para atrasar a execução do código para um tempo especificado. JavaScript não tem essa função, então usamos o setTimeout () função para executar a mesma tarefa. Embora não funcione exatamente como esperamos da função de sono, usaremos -o para construir nossa própria função de sono personalizada em JavaScript, neste artigo.

Por exemplo, se precisarmos registrar três mensagens no console com um atraso de um segundo, não podemos fazê -lo usando a função de sono em javascript, pois não está disponível. Mas podemos contornar isso usando o setTimeout () função.

Qual é o método setTimeout ()?

O setTimeout () O método é usado para definir um cronômetro para atrasar a execução do código. Ele executa o pedaço de código especificado após o timer expirar.

Muitos desenvolvedores que trabalharam com o dormir() função encontre setTimeout () ser confuso. Isso é porque eles confundem o setTimeout () função para ser uma versão do dormir() função em javascript.

Infelizmente, o setTimeout () tem suas próprias regras e não funciona da maneira como dormir() a função faz com que os desenvolvedores JavaScript precisem criar soluções engenhosas para fazê -lo funcionar como um dormir() função.

Neste guia, examinaremos várias dessas soluções e explicaremos como podemos usar o setTimeout () função para pausar a execução do código -fonte JavaScript e aguarde entre linhas consecutivas de código.

Ao contrário do dormir() função, se apenas colocarmos um atraso de um segundo usando o setTimeout () Método entre as linhas do código JavaScript, ele não funciona:

setTimeout (1000)
console.log ("mostrando depois de um segundo")
setTimeout (1000)
console.log ("mostrando após outro um segundo")

O código no exemplo acima será executado sem demora como se o setTimeout () função não existe.

O problema com o código dado acima é que o setTimeout () Método apenas atrasa a execução da função que é passada como uma função de retorno de chamada. No entanto, demos apenas um “atraso”Argumento quando realmente deve receber dois argumentos diferentes. O primeiro argumento deve ser uma função de retorno de chamada, e o segundo argumento deve ser o “atraso”. Agora vamos tentar fazer isso e ver o que acontece:

setTimeout (() => console.log ("mostrando depois de um segundo"), 1000)
setTimeout (() => console.log ("mostrando após outro um segundo"), 1000)

Desta vez o setTimeout () A função funcionará, mas não como deve, pois as duas mensagens de log do console serão exibidas ao mesmo tempo, em vez de ter um atraso de 1000 milissegundos entre eles.

Então, por que o setTimeout () falhou?

A razão porque setTimeout () falha no exemplo acima é que o setTimeout () A função em si funciona de forma síncrona no código JavaScript, mas a função de retorno de chamada dentro da função setTimeout () cria uma nova entrada na fila de tarefas assíncronas que é executada após o tempo especificado.

Desde o tempo especificado em ambos setTimeout () A função era a mesma e eles foram executados ao mesmo tempo devido à execução do código síncrono se JavaScript (com um atraso de apenas alguns milissegundos), todas as entradas na fila de tarefas assíncronas executam simultaneamente.

Como você pode ver, setTimeout () não é uma cópia exata do dormir() função, mas apenas fila o código para execução posterior. Então a pergunta surge, como fazemos funcionar como um dormir() função. Podemos fazer isso usando o aumento de tempo limite ao chamar o setTimeout () função:

setTimeout (() => console.log ("mostrando depois de um segundo"), 1000)
setTimeout (() => console.log ("mostrando após outro um segundo"), 2000)

Isso funciona porque a nova entrada na fila é criada aproximadamente ao mesmo tempo, mas essas entradas precisam esperar que diferentes quantidades de tempo sejam executadas.

O método fornecido acima é o método usado para adiar a execução de algumas partes do código, enquanto as outras partes são executadas de maneira síncrona. No entanto, se você deseja interromper a execução de todo o código JavaScript enquanto executa de maneira assíncrona outras partes dormir() função.

Como escrever uma função de sono

Em JavaScript, podemos criar um costume dormir() função usando promessas, assíncronas e aguardar. Isso funciona exatamente como um dormir() função faria em qualquer outro idioma.

No entanto, este costume dormir() A função precisa ser usada com a palavra -chave aguarda e deve ser chamada de funções assíncronas.

var sleep = (atraso) => nova promessa ((resolve) => setTimeout (resolver, atraso))
var repentMessage = async () =>
Aguarda sono (1000)
console.log ("mostrando depois de um segundo")
Aguarda sono (1000)
console.log ("mostrando após outro um segundo")

repeatMessage ();

Agora, usando este método de sono de construção personalizado, você pode interromper a execução do código JavaScript para a quantidade desejada de tempo.

Conclusão

JavaScript não tem o dormir() função por padrão para atrasar a execução do código, mas sua natureza assíncrona pode ser usada para alcançar a mesma tarefa. O embutido setTimeout () o método pode ser usado para atrasar a execução do código, mas para realmente tornar o código assíncrono em javascript e fazê -lo funcionar como o dormir() função, precisamos usar as promessas, aguardar e assíncronos funções. Neste artigo, aprendemos a criar costume dormir() Funções em JavaScript.