Cómo Usar JavaScript `setInterval` [Para Principiantes]

Una función útil para ejecutar tareas repetidas

🔁 ¿Qué es setInterval?

setInterval() es una función que ejecuta otra función repetidamente a intervalos específicos.

setInterval(function, intervaloEnMilisegundos);

🕒 Ejemplo: Mostrar la hora actual cada segundo


<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Reloj en tiempo 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 actual</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>

👇Esto aparecerá👇

--:--:--

🧩 Técnicas avanzadas y precauciones con setInterval

setInterval() es una función muy útil, pero si no se utiliza correctamente, puede causar problemas de rendimiento o comportamientos inesperados. En esta sección se presentan usos prácticos y puntos importantes a tener en cuenta.

🎯 Casos de uso efectivos

setInterval() es ideal para tareas como actualizar interfaces de usuario o animaciones. Algunos ejemplos comunes incluyen mostrar un reloj digital en tiempo real, ejecutar una cuenta regresiva o mostrar notificaciones periódicas.

⚠ Cuidado con los bucles infinitos

Al usar setInterval(), es importante implementar un mecanismo para detenerlo. Si olvidas llamar a clearInterval() cuando corresponde, el proceso puede seguir ejecutándose incluso si el usuario abandona la página, lo que puede consumir memoria innecesariamente.

🧪 Diferencias con setTimeout

Mientras que setTimeout() ejecuta una función una sola vez, setInterval() la ejecuta repetidamente a intervalos definidos. Es importante elegir la opción adecuada según el caso de uso.