CodeAventura
JavaScript en el DOM
▸Temporizadores▸setTimeout: retrasar acciones

Misión

<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>setTimeout</title>
  </head>
  <body>
    <button id="btn-enviar">Enviar mensaje</button>
    <p id="estado">Sin actividad</p>

    <script src="script.js"></script>
  </body>
</html>
●localhost:5173
12 / 16setTimeout: retrasar acciones
Anterior

setTimeout: retrasar acciones

La idea

No todo en una interfaz ocurre al instante. A veces necesitas esperar un momento antes de actuar: mostrar una confirmación que desaparece sola, lanzar una animación con retardo, simular una carga.

Para eso existe setTimeout.

Cómo funciona

El primer argumento es la función a ejecutar. El segundo es cuántos milisegundos esperar (1000 ms = 1 segundo).

Importante: setTimeout no bloquea el código que viene después. El resto del script sigue ejecutándose mientras el temporizador cuenta.

Ejemplo básico

Al pulsar el botón, primero aparece "Enviando mensaje..." y 2 segundos después cambia a "Mensaje enviado". Todo sin recargar la página.

Cancelar un timer con clearTimeout

setTimeout devuelve un id que puedes usar para cancelarlo si cambias de planes antes de que se ejecute:

El retardo mínimo real

El tiempo que especificas es un mínimo, no una garantía exacta. Si el navegador está ocupado con otra tarea, el callback puede llegar un poco después. Para retardos visibles por el usuario (más de 100ms) esto no importa en la práctica.

Cuándo usar setTimeout

  • Mensajes de confirmación que desaparecen solos
  • Feedback temporal (éxito, error) que no requiere acción del usuario
  • Animaciones encadenadas con pequeños retardos
  • Redirección tras completar una acción

Tu desafío 🚀

  1. Escucha el click de #btn-enviar
  2. Cambia #estado a "Enviando mensaje..."
  3. Usa setTimeout para que, 2 segundos después, #estado muestre "Mensaje enviado"

setTimeout convierte acciones instantáneas en experiencias con ritmo.