Como atrasar/aguardar na execução do código JavaScript?

As funções que podem atrasar ou interromper a execução de um pedaço de código são muito cruciais em uma linguagem de programação, pois são uma maneira de controlar o fluxo do programa. Existem muitos embutidos “atraso" ou "espere”Funções disponíveis na maioria das linguagens de programação. Mas em JavaScript, não há atraso, espera ou função de sono, porque é uma linguagem de script e linguagens de script são sempre síncronos e threads únicos.

Inicialmente, pode não parecer grande coisa, mas à medida que você avança no mundo da programação, você perceberá a importância das funções de "atraso" e "espera". Portanto, se não houver espera a função de sono, não há como controlar a execução de um programa em JavaScript? Bem, existem diferentes funções e métodos que nos ajudam a alcançar a mesma tarefa em JavaScript.

Usando a função setTimeout ()

O primeiro e o método mais comum na implementação de um atraso na execução de um código JavaScript é usar o setTimeout () método. Você fará um erro muito comum de assumir que a sintaxe é:

setTimeout (atraso no MS);

Considerando que, na realidade, esse método leva uma função de retorno de chamada. Tendo isso em mente, podemos olhar para a sintaxe como:

Sintaxe da função setTimeout ()

setTimeout (função, atraso no MS);

Para entender melhor o funcionamento do setTimeout () Método, vamos tentar resolver um problema.

Exemplo
Suponha que queremos imprimir números de 1 a 10, com um atraso de 1 segundo entre cada número.

A maneira tradicional seria:

para (vamos i = 1; i <=10 ; i++ )
setTimeout (1000);
console.log (i);

A saída do código está imprimindo instantaneamente todos os 10 dígitos como:

Porque não estamos passando nada para o método setTimeout ().

Para adicionar o atraso usando o método setTimeout (), achamos que a maneira correta é:

para (deixe i = 1; eu console.log (i), 1000);

Em vez de obter um atraso de 1 segundo após cada número, o que obtemos é um atraso de 1 segundo no início e, em seguida, todos os números são impressos instantaneamente. Como mostrado abaixo:

Tivemos o atraso inicial, mas sem demora depois disso. Por que? Bem, a maneira como o setTimeout () obras é que ele sempre é executado no modo síncrono. Isso significa que mesmo ter várias chamadas para a mesma função resultará no atraso de 1 s.

O que fizemos foi, invocamos cada um setTimeout () método um após o outro e devido à natureza assíncrona do setTimeout () método, não espera pelo anterior setTimeout () método para terminar e depois executar o próximo.

Então, em última análise, fizemos 10 ligações para setTimeout () método todos com o mesmo tempo de atraso. Existe uma maneira de corrigir isso, e isso usando um cronômetro de atraso crescente como:

setTimeout (() => console.log (i), 1000);
setTimeout (() => console.log (i), 2000);
setTimeout (() => console.log (i), 3000);

O exemplo de código acima da impressão de 10 números se tornaria o seguinte:

para (deixe i = 1; eu console.log (i), i * 1000);

Estamos usando o valor crescente da variável “i” e multiplicando-a com o atraso de 1 segundo para criar atrasos incrementadores para cada chamada de setTimeout ()

A saída com isso se torna:

Finalmente fizemos isso. Mas ainda há algo errado aqui. Esse é o fato de que os atrasos calculados dessa maneira são muito complicados, especialmente quando você está trabalhando em um aplicativo do mundo real. Há uma maneira de isso também, crie seu próprio método de atraso/espera.

Como codificar sua própria função de atraso/espera?

Queremos uma solução melhor, o que podemos fazer é codificar nosso próprio “atraso”Método. Estaremos usando o setTimeout () função e promessa para nos ajudar a criar o “atraso”Método como:

Simplesmente criaremos uma função com o nome de "Atraso" e passaremos o tempo em milissegundos. Essa função de "atraso" retorna uma promessa e não permitirá que a execução continue até que a promessa seja resolvida.

atraso da função (ms)
return nova promessa (resolve => setTimeout (resolve, ms));

Agora, chamamos isso de função de "atraso" com um ".então Operador. Assim:

console.log ("hello");
Atraso (2000).então (() => console.log ("mundo!"););

A saída seria:

Estamos criando uma promessa e setTimeout () método com algum atraso para resolver o promessa. Você pode ler mais sobre promessas de JavaScript.

Caso você queira se livrar do .então() método, e para acorrentar os atrasos, o que podemos fazer é usar assíncrono e aguardam com nossa função de "atraso".

Demo da função assíncrona ()
console.log ("Isso é um");
aguardar atraso (1000);
console.log ("linuxhint");
aguardar atraso (1000);
console.log ("tutorial!");

Nota: precisamos adicionar o assíncrono palavra -chave com a função que chama o atraso() método. Se executarmos o programa, o que obtemos é o seguinte:

Chegando ao nosso problema, a impressora numérica de 1 a 10, precisamos criá -la dentro de uma função assíncrona e chamar o método "atraso" que acabamos de criar como:

Função assíncreada númeroPrinter ()
para (vamos i = 1; i <= 10; i++)
console.log (i);
Aguarda Atraso (1000)

E precisamos chamar essa função com:

numberPrinter ();

A saída que obtemos com isso é:

É isso para a nossa função de "atraso".

Conclusão

Não há embutido espere, atraso, ou função de sono em javascript, mas podemos usar o setTimeout () método para imitar o comportamento do atraso e podemos até codificar o nosso atraso() método para criar um atraso na execução do programa. Nós aprendemos como setTimeout () O método funciona, como é comum entender mal seu trabalho e uso. Além disso, aprendemos a combinar o método setTimeout () com promessas Para criar nosso próprio método de atraso, e também aprendemos a usar assíncrono e aguardam em nossa função de esperar e depois continuar a execução.