setTimeout vs setInterval — Evite bugs comuns no JavaScript

setTimeout e setInterval parecem simples, mas escondem pegadinhas comuns que já derrubaram muito código por aí.

Hoje, você vai entender de vez quando usar cada um — e evitar os bugs invisíveis que eles podem causar.

---

🧠 Diferença básica

setTimeout(fn, delay);
// Executa APENAS UMA VEZ após o delay

setInterval(fn, delay);
// Executa INFINITAMENTE a cada delay

---

⛔ Problemas comuns

❌ Usar setInterval sem controle

setInterval(() => {
  console.log('Executando...');
}, 1000);

Se você esquecer do clearInterval(), esse código nunca para. E se você chamar ele várias vezes? Vai ter múltiplas execuções simultâneas — e talvez nem perceba.

✅ Melhor com setTimeout + recursão

function loopControlado() {
  console.log('Executando...');
  setTimeout(loopControlado, 1000);
}

loopControlado();

Com isso, você controla melhor a execução e evita intervalos sobrepostos.

---

⚙️ Quando usar cada um

Caso de uso	Use
Executar uma vez após um tempo	setTimeout
Criar uma animação leve	setTimeout (recursivo)
Intervalos constantes e previsíveis	setInterval (com clearInterval)
Atualizar UI a cada segundo (temporariamente)	setInterval + clearInterval

---

💡 Alternativa moderna

requestAnimationFrame(() => {
  // executa antes do próximo repaint
});

Ótimo para animações mais suaves. Ele pausa quando a aba fica inativa, economizando performance.

---

💬 E você?

Já deixou um setInterval rodando sem perceber?

Ou já viu o navegador travar por conta disso? 😅

Conta aqui nos comentários 👇

---