Pausas Assíncronas em JavaScript: Promises vs. Async/Await

JavaScript, sendo monofiliado, não possui um equivalente direto à função sleep() encontrada em outras linguagens. Simular uma pausa requer o uso de técnicas assíncronas. Este artigo explora duas abordagens: uma usando setTimeout e Promises, e outra utilizando a sintaxe mais limpa async/await.

Sumário

• Implementando uma Função Sleep com Promises
• Implementando uma Função Sleep com Async/Await

Implementando uma Função Sleep com Promises

O método mais direto usa setTimeout dentro de uma Promise. Isso evita o bloqueio da thread principal, garantindo que seu aplicativo permaneça responsivo.

function sleep(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

sleep(2000)
  .then(() => console.log("Dormiu por 2 segundos!"))
  .catch(error => console.error("Ocorreu um erro:", error));

console.log("Isso será executado antes da função sleep ser concluída.");

Explicação:

• sleep(ms): Esta função recebe a duração do sono em milissegundos (ms) como argumento.
• new Promise(resolve => setTimeout(resolve, ms)): Uma Promise é criada. setTimeout agenda a função resolve para ser chamada após ms milissegundos. Isso resolve a Promise, sinalizando o fim do sono.
• .then(): Isso lida com a Promise resolvida, executando o código dentro dela após o sono ser concluído.
• .catch(): Esta seção opcional lida com quaisquer erros que possam ocorrer durante o timeout.

Este método é eficiente e evita as armadilhas de bloquear a thread principal. No entanto, o uso de .then() pode parecer menos intuitivo para alguns programadores.

Implementando uma Função Sleep com Async/Await

Async/await oferece uma solução mais legível e, sem dúvida, mais elegante. Ele se baseia na abordagem baseada em Promises, mas simplifica o fluxo assíncrono.

async function sleep(ms) {
  await new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunction() {
  console.log("Iniciando...");
  await sleep(2000);
  console.log("Dormiu por 2 segundos!");
}

myFunction();
console.log("Isso será executado antes da função sleep ser concluída.");

Explicação:

• async function sleep(ms): A palavra-chave async denota uma função assíncrona.
• await new Promise(...): A palavra-chave await pausa a execução de sleep até que a Promise seja resolvida. Essa pausa não bloqueia a thread principal.
• async function myFunction(): Esta função demonstra como usar sleep dentro de uma operação assíncrona maior.

A sintaxe async/await faz com que o código assíncrono pareça síncrono, melhorando a legibilidade e a manutenção. Esta é geralmente a abordagem preferida por sua clareza e facilidade de uso.

Ambos os métodos alcançam o mesmo resultado, mas async/await oferece uma sintaxe mais moderna e legível para lidar com operações assíncronas em JavaScript. Evite loops de espera ocupada em código de produção; eles congelarão seu aplicativo.