Tema 19 · Asincronía

Temporizadores: setTimeout y setInterval

Aprende a programar la ejecución diferida de código con setTimeout y la repetición periódica con setInterval, además de su cancelación con clearTimeout y clearInterval.

Creación y Eliminación Dinámica de Nodos Promesas y Asincronía Básica

Temporizadores en el Navegador

JavaScript provee dos funciones globales asociadas al objeto window que permiten controlar el tiempo de ejecución de las instrucciones de manera asíncrona:

Función Comportamiento Método de Cancelación
setTimeout(callback, milisegundos) Ejecuta la función una sola vez tras transcurrir el tiempo especificado (1000 ms = 1 segundo). clearTimeout(id)
setInterval(callback, milisegundos) Ejecuta la función repetidamente en intervalos continuos de tiempo. clearInterval(id)

Ejemplos de Sintaxis

// 1. Ejecución diferida (ej: mensaje tras 3 segundos)
const idTimeout = setTimeout(() => {
  console.log("¡Han pasado 3 segundos!");
}, 3000);

// Si deseamos abortar antes de que se cumpla:
clearTimeout(idTimeout);

// 2. Ejecución periódica (ej: reloj cada 1 segundo)
let segundos = 0;
const idInterval = setInterval(() => {
  segundos++;
  console.log(`Tiempo transcurrido: ${segundos}s`);
  if (segundos === 10) {
    clearInterval(idInterval); // Detener al llegar a 10
  }
}, 1000);

⚡ Cronómetro Interactivo y Temporizador en Vivo

Prueba iniciar, pausar y reiniciar un contador en tiempo real gestionado con setInterval y clearInterval:

index.html
Solo lectura 
<!DOCTYPE html>
<html lang="es">
<head>
  <meta charset="UTF-8">
  <title>Temporizadores en JavaScript</title>
  <style>
    body { font-family: Arial, Helvetica, sans-serif; padding: 25px; background: #f8fafc; }
    .card-reloj { max-width: 460px; background: white; border: 1px solid #cbd5e1; border-radius: 8px; padding: 25px; text-align: center; }
    .display-tiempo { font-size: 3rem; font-family: monospace; font-weight: bold; color: #0284c7; background: #f0f9ff; border: 2px solid #bae6fd; border-radius: 8px; padding: 15px; margin: 15px 0; letter-spacing: 2px; }
    .grupo-btn { display: flex; gap: 8px; justify-content: center; }
    button { padding: 9px 18px; border: none; border-radius: 6px; font-weight: bold; cursor: pointer; }
    .btn-play { background: #16a34a; color: white; }
    .btn-pause { background: #ea580c; color: white; }
    .btn-reset { background: #64748b; color: white; }
    button:disabled { opacity: 0.5; cursor: not-allowed; }
    .alerta-mensaje { margin-top: 15px; font-size: 0.85rem; color: #475569; min-height: 20px; }
  </style>
</head>
<body>

  <div class="card-reloj">
    <h3 style="margin: 0; color: #0f172a;">Cronómetro Asíncrono</h3>

    <div class="display-tiempo" id="reloj">00:00.0</div>

    <div class="grupo-btn">
      <button class="btn-play" id="btn-iniciar" onclick="iniciar()">Iniciar</button>
      <button class="btn-pause" id="btn-pausar" onclick="pausar()" disabled>Pausar</button>
      <button class="btn-reset" onclick="reiniciar()">Reiniciar</button>
    </div>

    <div class="alerta-mensaje" id="mensaje-estado">Presiona "Iniciar" para activar setInterval.</div>
  </div>

  <script>
    let intervaloId = null;
    let decimas = 0;

    function formatearTiempo(totalDecimas) {
      const segTotales = Math.floor(totalDecimas / 10);
      const dec = totalDecimas % 10;
      const min = Math.floor(segTotales / 60);
      const seg = segTotales % 60;

      const strMin = String(min).padStart(2, '0');
      const strSeg = String(seg).padStart(2, '0');
      return `${strMin}:${strSeg}.${dec}`;
    }

    function iniciar() {
      if (intervaloId !== null) return;

      intervaloId = setInterval(function() {
        decimas++;
        document.getElementById('reloj').textContent = formatearTiempo(decimas);
      }, 100);

      document.getElementById('btn-iniciar').disabled = true;
      document.getElementById('btn-pausar').disabled = false;
      document.getElementById('mensaje-estado').textContent = "Cronómetro en marcha (actualización cada 100ms)...";
    }

    function pausar() {
      if (intervaloId === null) return;

      clearInterval(intervaloId);
      intervaloId = null;

      document.getElementById('btn-iniciar').disabled = false;
      document.getElementById('btn-pausar').disabled = true;
      document.getElementById('mensaje-estado').textContent = "Pausado con clearInterval.";
    }

    function reiniciar() {
      pausar();
      decimas = 0;
      document.getElementById('reloj').textContent = "00:00.0";
      document.getElementById('mensaje-estado').textContent = "Cronómetro reiniciado a cero.";
    }
  </script>

</body>
</html>
Pruébalo tú mismo » Se abre en una nueva pestaña con ejecución en vivo
🦉
¿Tienes dudas con este tema?
Sócrates AI puede darte analogías y explicarte este código paso a paso.

🚀 ¿Quieres dominar Manual Completo de JavaScript ES6+ y crear proyectos reales?

Aprende arquitectura limpia, desarrollo web moderno, buenas prácticas y despliegue en producción con nuestro Bootcamp Fullstack Developer con mentorías en vivo.

📖 Cuaderno Full-Stack Conocer el Bootcamp

🏛️ Autoría y Propiedad Intelectual: Obra educativa original de David Amador para Kilopolis Academia (Solucionáticos), estructurada sobre las especificaciones y estándares abiertos del W3C, el estándar vivo de WHATWG y la documentación oficial de código abierto. © Todos los derechos reservados.