Temporizador

La función setInterval se utiliza para poner una temporizador en el código. Un temporizador es una función que ejecuta automáticamente otra función de manera cíclica, esperando un intervalo de tiempo específico entre cada ejecución. La función setInterval no se detiene a menos se indique explícitamente.

Sintaxis:

let intervalo = setInterval(funcionAEjecutar, milisegundos);

Cada 1000ms equivale a 1 segundo.

Detener el temporizador:

Para frenarlo, usamos la instrucción clearInterval.

clearInterval(intervalo);

A tener en cuenta:

1. No es exacto: Si el navegador está muy ocupado procesando otras cosas pesadas, el intervalo podría retrasarse unos milisegundos. No es un reloj de alta precisión suizo, pero para la mayoría de las tareas web funciona perfecto.
2. Identificador único: Siempre que creas un setInterval, la función crea un identificador interno. Es por esto que se guarda en una variable: para poder detenerlo con clearInterval.

Ejemplo (Reloj Digital)

HTML

      <!DOCTYPE html>
      <html lang="es">
      <head>
      <meta charset="UTF-8">
      <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #2c3e50;
            color: #ecf0f1;
            font-family: 'Courier New', Courier, monospace;
        }
        #reloj {
            font-size: 5rem;
            border: 5px solid #bdc3c7;
            padding: 20px;
            border-radius: 10px;
            background-color: #000;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
        }
        </style>
        <head>
        <body>

        <div id="reloj">00:00:00</div>

        <script src="./js/script.js"></script>
        </body>
      </html>
    

JavaScript

      function actualizarReloj() {
        // 1. Obtenemos la fecha y hora actual
        const ahora = new Date();
        
        // 2. Extraemos horas, minutos y segundos
        let horas = ahora.getHours();
        let minutos = ahora.getMinutes();
        let segundos = ahora.getSeconds();
    
        // 3. Formateamos para que siempre tengan 2 dígitos (ej: "05" en vez de "5")
        horas = horas < 10 ? "0" + horas : horas;
        minutos = minutos < 10 ? "0" + minutos : minutos;
        segundos = segundos < 10 ? "0" + segundos : segundos;
    
        // 4. Creamos el string de tiempo
        const tiempoString = `${horas}:${minutos}:${segundos}`;
    
        // 5. Lo inyectamos en el elemento con id "reloj"
        document.getElementById("reloj").textContent = tiempoString;
    }
    
    // Ejecutamos la función una vez al inicio 
    actualizarReloj();
    
    // Configuramos el intervalo para que se repita cada segundo
    setInterval(actualizarReloj, 1000);