Cómo usar JavaScript `setTimeout`【Guía completa para principiantes】

Una función básica de JavaScript que te permite ejecutar tareas después de un cierto retraso.

⏰ Demostración en vivo: experimenta setTimeout

Haz clic en el botón de abajo y aparecerá un mensaje después de 3 segundos.

Uso básico (Código parcial)

La sintaxis básica de setTimeout es muy sencilla. Solo debes especificar la función a ejecutar y el tiempo de espera en milisegundos.

// Muestra una alerta después de 3000 milisegundos (es decir, 3 segundos)
setTimeout(() => {
  alert("¡Han pasado 3 segundos!");
}, 3000);

¡Copia y pega! Ejemplo completo en HTML

Guarda el siguiente código como archivo HTML para probarlo de inmediato.

<!DOCTYPE html>
<html lang="es">
<head>
  <title>Demostración de setTimeout</title>
</head>
<body>

  <h1>Prueba de setTimeout</h1>
  <p>Un mensaje aparecerá 5 segundos después de que la página se cargue.</p>

  <script>
    setTimeout(() => {
      // También puedes modificar elementos del DOM
      const messageDiv = document.createElement('div');
      messageDiv.textContent = '🎉 ¡Han pasado 5 segundos!';
      document.body.appendChild(messageDiv);
    }, 5000); // 5000 milisegundos = 5 segundos
  </script>

</body>
</html>

Ventajas y desventajas

Ventajas:
- ✅ Sintaxis muy sencilla, ideal para principiantes.
- ✅ Evita bloquear la interfaz de usuario al retrasar tareas, mejorando la experiencia.
- ✅ Útil para animaciones, mensajes de retroalimentación y mucho más.
Desventajas:
- ❌ Solo se ejecuta una vez. (Usa `setInterval` si quieres repetir tareas)
- ❌ El tiempo especificado no es exacto. (Es el tiempo mínimo de espera)
- ❌ El anidamiento profundo puede hacer que el código sea difícil de leer (infierno de callbacks).

Casos prácticos de uso

setTimeout no solo sirve para demorar tareas; es útil en muchos escenarios reales de desarrollo web.

Casos comunes de uso

Mostrar un mensaje de confirmación tras enviar un formulario y ocultarlo luego de unos segundos.
Esperar después de que el usuario deje de escribir antes de mostrar sugerencias.
Iniciar animaciones después de que la página haya cargado completamente.
Dividir tareas pesadas en fragmentos más pequeños para evitar congelar la interfaz.

Preguntas frecuentes (Q&A)

P: ¿Qué pasa si especifico 0 milisegundos?

R: No se ejecuta de inmediato. Se agrega a la cola de tareas y se ejecuta tan pronto como las tareas actuales hayan terminado. Se usa como técnica avanzada para dividir tareas largas y mejorar el rendimiento.

P: ¿Cuál es la diferencia entre `setTimeout` y `setInterval`?

R: `setTimeout` se ejecuta una vez tras el retardo; `setInterval` se ejecuta repetidamente. Para detener `setInterval`, usa `clearInterval`.

P: ¿Puedo cancelar la ejecución antes de que ocurra?

R: Sí. Guarda el ID del temporizador con `const timerId = setTimeout(...)` y luego llama a `clearTimeout(timerId)` para cancelarlo antes de que se ejecute.

Resumen

setTimeout es una función sencilla pero poderosa. Es una excelente introducción a la programación asincrónica en JavaScript. Desde pequeños efectos visuales hasta mejorar el rendimiento, sus aplicaciones son variadas. ¡Domina lo básico y utilízalo en múltiples situaciones!