⏱ Cómo usar setInterval + clearInterval

Esta es la sintaxis básica utilizada en JavaScript cuando quieres ejecutar tareas repetidas a intervalos regulares.
Por ejemplo, se utiliza en los siguientes escenarios:

  • 🕒 Reloj digital: Actualiza la hora actual cada segundo usando setInterval

  • 🖼 Presentación de imágenes: Cambia las fotos cada 5 segundos

  • 📢 Notificaciones automáticas: Muestra alertas o mensajes periódicamente

  • 🧮 Conteo ascendente o descendente: Actualiza números regularmente

  • 🎮 Animaciones o juegos: Actualiza movimientos a intervalos regulares

Cuenta: 0
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Contador (aumenta 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 cada segundo)</h1>
  <div id="counter">Conteo: 0</div>

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

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

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

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

</body>
</html>

🧩 Usar setInterval para "alternar efectos repetidos"

La función setInterval no solo sirve para contadores o temporizadores, también puede usarse para alternar estados repetidamente.

Por ejemplo, es útil en las siguientes situaciones:

  • 💡 Hacer que un texto parpadee para llamar la atención
  • 🔁 Cambiar la etiqueta de un botón entre ON / OFF
  • 🎨 Alternar el color de fondo cada pocos segundos para crear un efecto visual

Este es un ejemplo que cambia el color de fondo cada 3 segundos:

<script>
let isBlue = true;

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

Como se muestra, setInterval permite construir una interfaz dinámica con una lógica sencilla: "recordar → alternar → reasignar".

También puedes usar clearInterval() para detener el proceso. En futuros ejemplos, veremos botones intermitentes o controles para detener el cambio.