Implementar uma função dormir em JavaScript

1. Implementar uma função sleep() sem Promise, async e await em JavaScript
2. Implemente a função sleep() com Promise, async e await em JavaScript

Todos estão cientes de que a linguagem de programação JavaScript é uma linguagem de thread único, o que significa que tem apenas uma pilha de chamadas e uma pilha de heap. Por causa disso, o código JavaScript só pode ser executado linha por linha. Mas há momentos em que queremos realizar algumas operações que demoram algum tempo para serem executadas e, durante esse tempo, deixar o usuário esperando pelos resultados não é uma boa ideia.

Digamos que estejamos realizando uma chamada de API; então, pode levar algum tempo para obter a resposta do servidor. Em vez de esperar pela resposta, podemos adicionar a palavra-chave async antes da função que está fazendo a chamada API que retornará um objeto Promise. Isso tornará essa função assíncrona, e então com a ajuda do await, vamos esperar um pouco. Durante esse tempo, tentaremos realizar outras tarefas. Posteriormente, podemos voltar e mostrar os resultados da chamada API assim que recebermos a resposta do servidor.

Com isso, podemos fazer uso eficaz do mecanismo JavaScript. Para isso, o JavaScript fornece um objeto Promise e algumas palavras-chave como async e await. Uma Promise é um evento que nos diz se um pedido foi resolvido ou rejeitado. Sempre que solicitamos um recurso, há duas coisas: nossa solicitação será atendida ou pode ser rejeitada. Usando async, tornamos essa função assíncrona.

Implementar uma função sleep() sem Promise, async e await em JavaScript

Vamos primeiro ver o que acontece quando não usamos promise, async e await em nosso programa. O código abaixo tem 3 funções func_1, func_2 e sleep(). A execução começará a partir da função sleep(). Quando a execução começa, a função sleep() irá chamar a func_1 mas observe aqui que dentro da func_1 existe uma função setTimeOut() que tem um tempo limite de 3000ms (3 segundos). Agora a func_1 irá aguardar por esse período de tempo. Até então, outras linhas de código serão executadas.

const func_1 = () => {
  setTimeout(() => {return 'one'}, 3000);
};

const func_2 = () => {
  return 'two'
};

const sleep = () => {
  let first_response = func_1();
  console.log(first_response);

  let second_response = func_2();
  console.log(second_response);
};

sleep();

Resultado:

undefined
two

Quando console.log(first_response); for executado, ele imprimirá undefined. Uma vez que func_1() está atualmente em estado de espera e então first_response não tem nenhum dentro dele. É por isso que está imprimindo undefined. Em JavaScript, existe um conceito de içamento em que todas as variáveis ​​em um programa que são declaradas, mas não inicializadas, recebem o valor de undefined. É assim que obtemos undefined como saída.

A segunda função, func_2(), é direta. Aqui, ele simplesmente retornará a string two, e então será armazenado dentro da variável second_response e então será impresso na janela de saída.

Implemente a função sleep() com Promise, async e await em JavaScript

Aqui, vamos usar a Promise, async e await e fazer algumas pequenas modificações no nosso programa. Observe como estamos obtendo o valor undefined da função func_1(). Então, vamos consertar isso tornando a função sleep() assíncrona com async e então esperar ou dormir por algum tempo com a ajuda de await e então obter a resposta como objeto Promise, que é retornado por async.

const func_1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('The request is successful.');
    }, 3000);
  });
};

const func_2 = () => {
  return 'two'
};

const sleep = async () => {
  let first_response = await func_1();
  console.log(first_response);

  let second_response = func_2();
  console.log(second_response);
};

sleep();

Resultado:

The request is successful.
two

Apenas adicionar a palavra-chave async na frente da função não torna essa função assíncrona. Para isso, sempre que você quiser fazer uma chamada assíncrona ou esperar, temos que usar await nessa função, neste caso antes de func_1().

A palavra-chave await é escrita antes de uma função que permite que a função espere algum tempo e depois a execute. O tempo até que ele espere até que execute a função depende do tempo especificado dentro da função setTimeOut().

Dentro da função, func_1, estamos retornando um objeto Promise que leva dois parâmetros, o primeiro é o resolve e o segundo é o reject. Se a Promise for cumprida com sucesso, podemos usar o método resolve; caso contrário, podemos usar o método reject.

Se você executar este programa, a func_1() será chamada primeiro e, em seguida, o programa aguardará 3 segundos, pois usamos setTimeOut() de 3000ms. Depois disso, ele retornará a string The request is successful. como resultado de func_1, ele será armazenado na variável first_response. A func_2() será chamada e retornará diretamente dois como resultado, que será então armazenado dentro da variável second_response. É assim que alcançamos a funcionalidade sleep() em JavaScript.