Como Usar JavaScript `setInterval` [Para Iniciantes]

Uma função útil para executar tarefas repetidas

🔁 O que é setInterval?

setInterval() é uma função que executa outra função repetidamente em intervalos específicos.

setInterval(função, intervaloEmMilissegundos);

🕒 Exemplo: Mostrar a hora atual a cada segundo


<!DOCTYPE html>
<html lang="pt">
<head>
  <meta charset="UTF-8">
  <title>Relógio em tempo real</title>
  <style>
    body {
      font-family: sans-serif;
      text-align: center;
      padding: 50px;
      background: #f9f9f9;
    }
    h1 {
      font-size: 2rem;
      margin-bottom: 1rem;
    }
    #clock {
      font-size: 2.5rem;
      font-weight: bold;
      color: #333;
    }
  </style>
</head>
<body>

  <h1>🕒 Hora atual</h1>
  <div id="clock">--:--:--</div>

  <!-- Script -->
  <script>
    setInterval(() => {
      const now = new Date();
      const time = now.toLocaleTimeString();
      document.getElementById("clock").textContent = time;
    }, 1000);
  </script>

</body>
</html>

👇Isso aparecerá👇

--:--:--

🧩 Técnicas Avançadas e Cuidados com setInterval

setInterval() é uma função muito útil, mas se for mal utilizada, pode causar problemas de desempenho ou comportamentos inesperados. Nesta seção, apresentamos exemplos práticos e pontos importantes a serem observados.

🎯 Casos de Uso Eficazes

setInterval() é ideal para atualizar elementos da interface do usuário ou criar animações em loop. Exemplos comuns incluem exibir um relógio digital em tempo real, rodar um temporizador regressivo ou mostrar notificações periódicas.

⚠ Atenção com Loops Infinitos

Ao usar setInterval(), é fundamental implementar um mecanismo para pará-lo. Se você esquecer de chamar clearInterval() em determinadas condições, o processo pode continuar em execução mesmo após o usuário sair da página, consumindo memória desnecessariamente.

🧪 Diferença em relação ao setTimeout

Enquanto setTimeout() executa uma função apenas uma vez, setInterval() a executa repetidamente em intervalos definidos. A escolha entre eles depende do uso desejado.