Como Implementar uma Função de Pausa em JavaScript: Técnicas de Atraso Assíncrono Explicadas

By 佐川 直弘 | Naohiro Sagawa (運営者)

※記事内に広告を含みます。Amazonアソシエイトとして適格販売により収入を得ています。　

1. Introdução

JavaScript é uma linguagem de programação amplamente usada tanto no frontend quanto no backend. Contudo, ao contrário de muitas outras linguagens, ela não fornece uma função sleep incorporada como recurso padrão.

Uma função sleep é tipicamente usada para pausar a execução por um período de tempo especificado. Por exemplo, pode ser útil ao inserir pequenos atrasos após a obtenção de dados ou ao controlar animações da interface do usuário (UI).

Entretanto, como JavaScript é uma linguagem de thread única projetada para lidar com processamento assíncrono de forma eficiente, uma função sleep bloqueante síncrona não existe por design.

Propósito deste Artigo

Este artigo explica métodos concretos para implementar comportamento semelhante a sleep em JavaScript. Partindo de exemplos de código básicos e avançando para implementações mais sofisticadas, ele é escrito de forma que até iniciantes possam entender, ao mesmo tempo em que fornece conhecimento prático para uso em situações reais.

Além disso, a relação entre processamento assíncrono e o loop de eventos é explicada, juntamente com advertências importantes, para ajudar os leitores a obter uma compreensão sólida de como o JavaScript funciona internamente.

Público‑Alvo

Este artigo destina‑se aos seguintes leitores:

• Iniciantes em JavaScript que compreendem a sintaxe básica, mas ainda não se sentem confortáveis com o processamento assíncrono.
• Desenvolvedores que se perguntam por que JavaScript não possui uma função sleep incorporada e desejam aprender implementações alternativas.
• Aqueles que precisam de lógica de atraso para requisições de API ou controle de animações em aplicações reais.

Próximos Passos

No próximo artigo, intitulado “Implementação Básica de uma Função sleep em JavaScript”, focaremos na abordagem mais simples usando a função setTimeout.

Esse artigo incluirá exemplos de código concretos e também apresentará implementações mais avançadas usando Promise e async/await.

2. Implementação Básica de uma Função sleep em JavaScript

JavaScript não fornece uma função sleep incorporada, mas um comportamento semelhante pode ser alcançado usando processamento assíncrono. Nesta seção, apresentamos duas abordagens fundamentais de implementação.

2-1. Execução Atrasada usando setTimeout

Em JavaScript, a função setTimeout permite executar código após um atraso especificado. Aproveitando essa função, você pode implementar um mecanismo simples semelhante a sleep.

Sintaxe Básica

setTimeout(callback, milliseconds);

Exemplo

O código a seguir exibe uma mensagem no console após um segundo.

console.log("Start");

setTimeout(() => {
  console.log("Executed after 1 second");
}, 1000);

console.log("End");

Resultado da Execução

Start  
End  
Executed after 1 second

2-2. Implementação usando Promise e async/await

Para tornar a lógica assíncrona mais fácil de controlar, você pode implementar uma função sleep usando Promise e async/await.

Implementando uma Função sleep com Promise

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

console.log("Start");

sleep(1000).then(() => {
  console.log("Executed after 1 second");
});

console.log("End");

2-3. Uma Implementação Mais Concisa usando async/await

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

async function demo() {
  console.log("Start");
  await sleep(1000); // wait for 1 second
  console.log("Executed after 1 second");
  console.log("End");
}

demo();

2-4. Resumo

Nesta seção, apresentamos métodos básicos para implementar uma função sleep em JavaScript.

• setTimeout: Simples, mas requer controle assíncrono cuidadoso.
• Promise e async/await: Mais legível e adequado para aplicações práticas.

3. Casos de Uso Práticos

Nesta seção, apresentamos casos de uso concretos que aplicam a funcionalidade semelhante a sleep em JavaScript.

3-1. Definindo Tempo de Espera Dentro de Loops

Exemplo 1: Controle de Intervalos de Busca de Dados

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

async function fetchData() {
  const urls = [
    "https://api.example.com/data1",
    "https://api.example.com/data2",
    "https://api.example.com/data3"
  ];

  for (let url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);

    // wait for 1 second
    await sleep(1000);
  }
}

fetchData();

3-2. Controle Atrasado de Animações de UI

Exemplo 2: Exibição Atrasada em uma Apresentação de Slides

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

async function startSlideshow(images) {
  for (let img of images) {
    console.log(`Displaying: ${img}`); // using console output as a placeholder
    await sleep(2000); // wait for 2 seconds
  }
}

const imageList = ["image1.jpg", "image2.jpg", "image3.jpg"];
startSlideshow(imageList);

3-3. Ajuste de Intervalos de Requisições de API

Exemplo 3: Polling de API em Intervalos Fixos

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

async function pollAPI() {
  const endpoint = "https://api.example.com/status";

  while (true) {
    const response = await fetch(endpoint);
    const data = await response.json();
    console.log(`Fetched data: ${data.status}`);

    // Exit the loop based on a condition
    if (data.status === "complete") {
      console.log("Process completed");
      break;
    }

    // wait for 3 seconds
    await sleep(3000);
  }
}

pollAPI();

3-4. Resumo

• Esperando dentro de loops: Útil para controlar intervalos de recuperação de dados e ordem de execução.
• Atrasos em animações de UI: Melhora a experiência do usuário ao gerenciar efeitos de temporização visual.
• Controle de intervalo de requisições de API: Permite monitoramento dinâmico de dados por meio de polling.

4. Melhores Práticas e Considerações Importantes

Você aprendeu como implementar e aplicar funcionalidade semelhante a sleep em JavaScript, mas há várias considerações importantes ao usá‑la em aplicações reais. Esta seção apresenta melhores práticas relacionadas a desempenho e tratamento de erros.

4-1. Entendendo o Processamento Assíncrono e o Loop de Eventos

JavaScript roda em um único thread e gerencia operações assíncronas através do loop de eventos. Sem entender esse mecanismo, o código pode não se comportar como esperado.

Como o Loop de Eventos Funciona

O loop de eventos do JavaScript processa tarefas na seguinte ordem:

1. Pilha de Chamadas: Operações síncronas são empilhadas e executadas em ordem.
2. Fila de Tarefas: Callbacks assíncronos (como setTimeout) são adicionados aqui e executados quando a pilha de chamadas está vazia.

Exemplo: Observando o Comportamento do Loop de Eventos

console.log("Start");

setTimeout(() => {
  console.log("Timer finished");
}, 0);

console.log("End");

Resultado da Execução

Start  
End  
Timer finished

4-2. Considerações de Desempenho

O uso excessivo de atrasos semelhantes a sleep pode impactar negativamente o desempenho da aplicação. Mantenha os seguintes pontos em mente.

Exemplo Ruim: Evite Operações Bloqueadoras Longas

const delay = Date.now() + 5000; // wait for 5 seconds
while (Date.now() < delay) {
  // busy waiting
}

Exemplo Bom: Espera com Processamento Assíncrono

async function example() {
  console.log("Start");
  await sleep(5000); // wait for 5 seconds
  console.log("End");
}
example();

4-3. Implementando Tratamento de Erros

Exemplo: Tratamento de Erros em Requisições de API

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

async function fetchDataWithRetry(url, retries = 3, delay = 1000) {
  for (let i = 0; i < retries; i++) {
    try {
      const response = await fetch(url);
      if (!response.ok) throw new Error(`Erro HTTP: ${response.status}`);
      const data = await response.json();
      console.log(data);
      return; // exit on success
    } catch (error) {
      console.error(`Tentativa ${i + 1}: Ocorreu um erro - ${error.message}`);
      await sleep(delay); // wait before retrying
    }
  }
  console.error("Todas as tentativas de retry falharam");
}

fetchDataWithRetry("https://api.example.com/data");

4-4. Summary

• Understanding the event loop: Essential knowledge for predictable asynchronous behavior.
• Performance optimization: Avoid blocking operations to maintain application responsiveness.
• Error handling: Build robust code using retries and logging.
• Environment differences: Understand browser and Node.js characteristics to choose the best approach.

5. Frequently Asked Questions (FAQ)

In this section, we address common questions readers often have about implementing a sleep function in JavaScript.

5-1. Is a “sleep” Function Really Necessary in JavaScript?

Question:
JavaScript is designed to handle asynchronous processing efficiently. Is a sleep function really necessary?

Answer:
A sleep-like function can be very useful in specific use cases, such as:

• Adjusting API request intervals: Executing consecutive requests while reducing server load.
• Controlling UI animations: Implementing slideshows or step-by-step visual effects.
• Retry logic: Reattempting operations at fixed intervals after communication errors.

5-2. Why Doesn’t JavaScript Have a Built-in sleep Function?

Question:
Many other programming languages provide a built-in sleep function. Why doesn’t JavaScript?

Answer:
JavaScript is designed around asynchronous processing and uses an event loop to manage execution. This design ensures UI responsiveness and efficient task handling, making synchronous blocking functions like sleep undesirable by default.

5-3. What Is the Difference Between Synchronous and Asynchronous Processing?

Question:
I don’t fully understand the difference between synchronous and asynchronous processing.

Answer:
The difference can be illustrated with the following examples.

Synchronous Example:

console.log("Início");
for (let i = 0; i < 1e9; i++) {} // time-consuming operation
console.log("Fim");

Asynchronous Example:

console.log("Início");
setTimeout(() => {
  console.log("Fim");
}, 1000);
console.log("Processando");

5-4. What Should I Be Careful About When Using a sleep Function?

Question:
Are there any important points to keep in mind when using a sleep function?

Answer:

1. Performance impact: Long delays can slow down overall execution.
2. Avoid UI freezing: Always use asynchronous approaches instead of blocking loops.
3. Error handling: Combine sleep logic with retry mechanisms for stability.

5-5. Summary

In this section, we addressed common questions about the sleep function in JavaScript.

• JavaScript does not include a built-in sleep function, but equivalent behavior can be implemented using asynchronous techniques.
• Practical answers to common questions help deepen real-world understanding.

6. Conclusion

6-1. Article Recap

1. The Need for a “sleep” Function in JavaScript

Although JavaScript does not provide a built-in sleep function, we explained how equivalent behavior can be achieved using asynchronous processing.

2. Implementation Methods

• setTimeout: The most basic approach for delayed execution.
• Promise and async/await: Easier control over asynchronous flow and improved readability.

3. Best Practices and Considerations

• Entendendo o loop de eventos: Explicando como a execução assíncrona funciona internamente.
• Consciência de desempenho: Evitando operações bloqueantes e escrevendo código eficiente.
• Tratamento de erros: Projetando lógica robusta usando tentativas e registro de logs.

6-2. Casos de Uso Futuro

Uma função semelhante a sleep em JavaScript é útil em muitos cenários, desde controle simples de temporização até fluxos de trabalho assíncronos avançados.

Aplicações Práticas em Projetos:

• Interfaces de usuário: Controlando animações para botões e formulários.
• Polling de API: Monitorando periodicamente os dados mais recentes.
• Processamento em lote: Executando grandes operações de dados em intervalos controlados para gerenciar a carga do sistema.

6-3. Considerações Finais

Seguindo este artigo e praticando com código real, você pode aprofundar sua compreensão do comportamento assíncrono do JavaScript. Aplicar os exemplos e as melhores práticas discutidas aqui ajudará a construir aplicações mais flexíveis, confiáveis e práticas.