CodeAventura
JavaScript en el DOM
▸Temporizadores▸setInterval y clearInterval

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>setInterval</title>
  </head>
  <body>
    <button id="btn-iniciar">Iniciar</button>
    <button id="btn-detener">Detener</button>
    <p id="contador">0</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
13 / 16setInterval y clearInterval
Anterior

setInterval y clearInterval

Cuando necesitas repetición

setTimeout ejecuta código una sola vez tras un retardo. setInterval lo ejecuta repetidamente cada cierto tiempo, hasta que lo detengas.

El caso del contador

Un contador que incrementa cada segundo es el ejemplo más claro de setInterval:

Cada segundo, cuenta sube uno y el número en pantalla se actualiza.

Detener el intervalo con clearInterval

Sin control, setInterval corre para siempre mientras la pestaña esté abierta. Igual que setTimeout, devuelve un id que usas para detenerlo:

Error común: múltiples intervalos simultáneos

Si el usuario pulsa "Iniciar" varias veces sin detener el anterior, se acumulan intervalos y el contador se acelera. La solución es limpiar el intervalo previo antes de crear uno nuevo:

setTimeout vs setInterval

setTimeoutsetInterval
EjecucionesUna sola vezRepetidamente
Se detiene conclearTimeoutclearInterval
Uso típicoRetardo puntualAcción periódica

Cuándo usar setInterval

  • Relojes y cronómetros
  • Actualizaciones periódicas de datos (polling)
  • Animaciones paso a paso
  • Carruseles automáticos

Tu desafío 🚀

  1. Escucha el click de #btn-iniciar
  2. Lanza un setInterval que incremente un número cada segundo y lo muestre en #contador
  3. Guarda el id devuelto por setInterval en una variable
  4. Escucha el click de #btn-detener
  5. Usa clearInterval con ese id para detener el contador

Controlar el tiempo es controlar el ritmo de la interfaz.