Como usar JavaScript `setTimeout`【Guia completo para iniciantes】

Uma função básica do JavaScript usada para executar uma ação após um certo tempo de espera.

⏰ Demonstração ao vivo: experimente o setTimeout

Clique no botão abaixo e uma mensagem aparecerá após 3 segundos.

Uso básico (Código parcial)

A sintaxe básica do setTimeout é muito simples. Basta indicar a função a ser executada e o tempo de espera em milissegundos.

// Exibe um alerta após 3000 milissegundos (ou seja, 3 segundos)
setTimeout(() => {
  alert("3 segundos se passaram!");
}, 3000);

Copie e cole! Exemplo HTML completo

Salve o código abaixo como um arquivo HTML para testá-lo imediatamente.

<!DOCTYPE html>
<html lang="pt">
<head>
  <title>Demonstração do setTimeout</title>
</head>
<body>

  <h1>Teste do setTimeout</h1>
  <p>Uma mensagem será exibida 5 segundos após o carregamento da página.</p>

  <script>
    setTimeout(() => {
      // Você também pode modificar elementos na página
      const messageDiv = document.createElement('div');
      messageDiv.textContent = '🎉 5 segundos se passaram!';
      document.body.appendChild(messageDiv);
    }, 5000); // 5000 milissegundos = 5 segundos
  </script>

</body>
</html>

Vantagens e desvantagens

Vantagens:
- ✅ Sintaxe muito simples, ideal para iniciantes.
- ✅ Permite atrasar ações para evitar bloqueio de interface e melhorar a experiência do usuário.
- ✅ Útil para animações, mensagens de feedback e muito mais.
Desvantagens:
- ❌ Executa apenas uma vez. (Use `setInterval` para execuções repetidas)
- ❌ O tempo especificado não é exato. (É o tempo mínimo de espera)
- ❌ O uso excessivo de funções aninhadas pode dificultar a leitura do código (callback hell).

Casos práticos

setTimeout não é apenas para atrasar execuções — é útil em muitos cenários reais de desenvolvimento web.

Casos de uso comuns

Exibir mensagens de confirmação após o envio de formulários e ocultá-las após alguns segundos.
Aguardar um tempo após a digitação do usuário antes de mostrar sugestões.
Iniciar animações após o carregamento completo da página.
Dividir tarefas pesadas em partes menores para manter a interface responsiva.

Perguntas frequentes (Q&A)

P: O que acontece se eu definir 0 milissegundos?

R: A execução não é imediata. A função é adicionada à fila de tarefas e executada assim que as tarefas atuais forem concluídas. Isso é útil para dividir tarefas longas e melhorar o desempenho.

P: Qual a diferença entre `setTimeout` e `setInterval`?

R: `setTimeout` executa uma vez após o atraso; `setInterval` executa repetidamente. Use `clearInterval` para interromper as repetições.

P: Posso cancelar a execução antes que aconteça?

R: Sim. Armazene o ID do temporizador com `const timerId = setTimeout(...)` e chame `clearTimeout(timerId)` para cancelá-lo antes da execução.

Resumo

setTimeout é uma função simples, porém poderosa. É uma ótima introdução à programação assíncrona no JavaScript. Desde pequenos efeitos de interface até otimizações de desempenho, seu uso é amplo. Aprenda o básico e aplique no seu projeto!