Cómo funcionan setTimeout y setInterval en JavaScript

En el desarrollo web, manejar el tiempo de ejecución es crucial para crear experiencias dinámicas y fluidas. Dos funciones muy importantes en JavaScript para gestionar temporizadores son setTimeout y setInterval. Aunque ambas son fundamentales, suelen generar confusión, especialmente en cómo y cuándo utilizarlas. En este artículo, como docente y experto en desarrollo web, explicaré detalladamente el uso de estas funciones, presentando ejemplos prácticos y técnicas modernas que te ayudarán a sacarles el máximo provecho.

¿Qué es setTimeout?

La función setTimeout se utiliza para ejecutar un bloque de código una vez después de un período de tiempo especificado. En términos simples, puedes usarla para retrasar la ejecución de una función.

Sintaxis básica:

setTimeout(función, tiempo);

• función: es el código o llamada a la función que se ejecutará.
• tiempo: representa el tiempo en milisegundos que se debe esperar antes de ejecutar la función.

A continuación veremos un ejemplo que nos permite mostrar un mensaje en consola después de 2 segundos

setTimeout(() => {
  console.log("Este mensaje aparece después de 2 segundos");
}, 2000);

Aquí, después de 2 segundos (2000 milisegundos), el mensaje se mostrará en la consola.

Como detener un setTimeout

JavaScript nos ofrece un mecanismo para cancelar o detener un setTimeout. Para esto contamos con clearTimeout. A continuación veremos un ejemplo:

let idTimeout = setTimeout(() => {
  console.log("No deberías ver este mensaje");
}, 3000);

clearTimeout(idTimeout);  // Cancela el temporizador antes de que se ejecute

Podremos leer más sobre el uso de este mecanismo en la documentación de MDN.

¿Qué es setInterval?

Mientras que setTimeout se ejecuta una vez después de un retraso, setInterval ejecuta un bloque de código repetidamente en intervalos de tiempo fijos.

Sintaxis básica:

setInterval(función, intervalo);

• función: el código o función que se ejecutará repetidamente.
• intervalo: el tiempo en milisegundos entre cada ejecución.

Veamos el funcionamiento de esta característica en acción. Para este ejemplo crearemos un contador que se incrementa cada segundo:

let contador = 0;

const intervalId = setInterval(() => {
  contador++;
  console.log(`Contador: ${contador}`);

  if (contador === 5) {
    clearInterval(intervalId);  // Detiene el intervalo después de 5 segundos
  }
}, 1000);

En este ejemplo, el contador se incrementa cada segundo, y el setInterval se detiene automáticamente después de 5 repeticiones.

De manera similar a setTimeout, podemos cancelar un setInterval utilizando clearInterval.

let idInterval = setInterval(() => {
  console.log("Este mensaje se repite cada 2 segundos");
}, 2000);

clearInterval(idInterval);  // Cancela el intervalo

Técnicas modernas: promesas y async/await con setTimeout

Si bien setTimeout y setInterval funcionan bien por sí mismos, es común integrarlos con técnicas modernas como Promesas y async/await para manejar mejor el código asíncrono.

Cómo utilizar setTimeout con una promesa

JavaScript nos brinda la posibilidad de convertir setTimeout en una promesa para que se pueda utilizar junto con async/await. Esto es útil para evitar el anidamiento de callbacks. Veamos un ejemplo de código para comprender mejor esta estructura:

function esperar(ms) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function ejecutarConRetraso() {
  console.log("Esperando 3 segundos...");
  await esperar(3000);  // Espera 3 segundos
  console.log("¡Listo!");
}

ejecutarConRetraso();

Este patrón hace que el código sea más legible, especialmente cuando trabajamos con múltiples operaciones asincrónicas.

Temporizadores dinámicos con setInterval

En ocasiones, necesitamos ajustar el intervalo de tiempo dinámicamente mientras el setInterval está en funcionamiento. Para lograr esto, analizaremos una técnica que nos posibilita cambiar el intervalo de ejecución según las necesidades particulares de cada situación del desarrollo.

A continuación veremos un ejemplo práctico de un temporizador que ajusta su intervalo dinámicamente:

let intervalo = 1000;  // Comienza con 1 segundo
let repeticiones = 0;

const idDinamico = setInterval(() => {
  repeticiones++;
  console.log(`Intervalo actual: ${intervalo}ms, Repetición: ${repeticiones}`);

  // Aumenta el intervalo en 500ms después de cada repetición
  intervalo += 500;

  // Cancela después de 5 repeticiones
  if (repeticiones === 5) {
    clearInterval(idDinamico);
    console.log("Fin del intervalo dinámico");
  }
}, intervalo);

En este ejemplo, el intervalo entre ejecuciones cambia en cada repetición, aumentando el tiempo de espera en 500 ms. Es una técnica útil cuando se necesita que las acciones repetidas se ralenticen o aceleren gradualmente.

Consideraciones de rendimiento y buenas prácticas

El uso incorrecto de setInterval puede causar problemas de rendimiento, especialmente si el código dentro del intervalo tarda más en ejecutarse que el tiempo de intervalo definido. Esto puede llevar a una sobrecarga del «event loop». Es recomendable asegurarse de que las operaciones dentro de un setInterval se ejecuten rápidamente o utilizar setTimeout recursivo en lugar de setInterval.

Ahora vamos a ver el código de un setTimeout recursivo como alternativa a setInterval:

function ejecutarRecursivamente() {
  console.log("Este es un intervalo controlado recursivamente");

  setTimeout(ejecutarRecursivamente, 2000);  // Llama a sí mismo después de 2 segundos
}

ejecutarRecursivamente();

Con este enfoque, controlamos el siguiente setTimeout manualmente. Esto permite asegurarnos que el código anterior haya terminado de ejecutarse antes de iniciar el siguiente.

Ahora vemos una recomendación importante para evitar anidamientos profundos. Tanto setTimeout como setInterval pueden crear anidamientos complejos que hagan que el código sea difícil de leer y mantener. Utilizar técnicas modernas como async/await es una buena práctica para mejorar la legibilidad y evitar situaciones que perjudiquen el rendimiento.

Consideraciones finales al usar setTimeout y setInterval en JavaScript

Tanto setTimeout como setInterval en JavaScript son características de gran utilidad para manejar la ejecución de funciones. Permiten que el código responda en momentos precisos o que repita tareas en intervalos regulares. Sin embargo, como hemos visto, es importante manejarlas correctamente. Aquí es donde resulta importante considerar técnicas más modernas como las Promesas y async/await para facilitar la gestión del código asíncrono.

Usar setTimeout para manejar temporizadores únicos y setInterval para tareas repetitivas es solo el comienzo. Al aprender a combinarlos con técnicas avanzadas, podremos integrarlas con nuestros proyectos para resolver muchas situaciones del desarrollo.

Si te interesa el tema y te queda alguna consulta déjame un comentario o escríbeme un mensaje.

Más sobre Diseño y desarrollo Web

Acerca de Damián De Luca

Autor de los libros: Webmaster Profesional, HTML5: Comprenda el cambio y Apps HTML5 para móviles. Soy especialista en Desarrollo Web. Realizo proyectos basados en Inteligencia Artificial. Colaboré como autor y editor de contenidos para revistas, colecciones y diversos medios impresos y digitales. Brindo capacitaciones, clases de formación y consultorías sobre lenguajes de programación y herramientas para Desarrollo Web y móvil en modalidad online y presencial.