⏱ Como usar setInterval + clearInterval

Esta é a sintaxe básica usada em JavaScript quando você deseja executar tarefas repetidas em intervalos regulares.
Por exemplo, é usada nos seguintes cenários:

  • 🕒 Relógio digital: Atualiza a hora atual a cada segundo usando setInterval

  • 🖼 Slideshow de imagens: Troca as fotos a cada 5 segundos

  • 📢 Notificações automáticas: Exibe alertas ou mensagens periodicamente

  • 🧮 Contagem progressiva ou regressiva: Atualiza números regularmente

  • 🎮 Animações ou jogos: Atualiza movimentos em intervalos regulares

Contagem: 0
<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contador (aumenta a cada segundo)</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 2rem;
    }
    #counter {
      font-size: 2rem;
      margin: 1rem 0;
    }
    button {
      font-size: 1rem;
      padding: 0.5rem 1.2rem;
      margin: 0.5rem;
    }
  </style>
</head>
<body>

  <h1>⏱ Contador (aumenta a cada segundo)</h1>
  <div id="counter">Contagem: 0</div>

  <button onclick="startCounting()">Iniciar</button>
  <button onclick="stopCounting()">Parar</button>

  <script>
    let count = 0;
    let intervalId = null;

    function startCounting() {
      if (intervalId !== null) return;
      intervalId = setInterval(() => {
        count++;
        document.getElementById("counter").textContent = "Contagem: " + count;
      }, 1000);
    }

    function stopCounting() {
      clearInterval(intervalId);
      intervalId = null;
    }
  </script>

</body>
</html>

🧩 Usando setInterval para "efeitos alternados"

A função setInterval não é útil apenas para contadores ou temporizadores — ela também pode ser usada para alternar estados repetidamente.

Por exemplo, é útil nos seguintes cenários:

  • 💡 Fazer um texto piscar para chamar a atenção
  • 🔁 Alternar o rótulo de um botão entre ON / OFF
  • 🎨 Alterar a cor de fundo a cada poucos segundos para adicionar um efeito visual

Veja um exemplo que alterna a cor de fundo a cada 3 segundos:

<script>
let isBlue = true;

setInterval(() => {
  document.body.style.backgroundColor = isBlue ? "#cceeff" : "#ffeedd";
  isBlue = !isBlue;
}, 3000);
</script>

Como mostrado, setInterval permite criar uma interface dinâmica com uma lógica simples de "memorizar → alternar → reatribuir".

Você também pode usar clearInterval() para interromper o processo. Em exemplos futuros, veremos botões piscando ou botões para pausar a alternância.