Idioma: ES
LuisLlamas Logo
Buscar
⏲️ ~ 3 minutos Iniciación
javascript-setinterval-settimeout

Uso de setInterval y setTimeout en JavaScript

En JavaScript setInterval y setTimeout son una de las formas más sencillas para gestionar la temporización de tareas.

Estos dos métodos frecuentemente usados, y son una forma fácil de aproximarse a la programación asíncrona.

  • setTimeout se usa para retrasar la ejecución de una función una sola vez.
  • setInterval se utiliza para ejecutar código repetidamente a intervalos regulares.

Además están disponibles tanto los navegadores web, como en la mayoría de runtimes como NodeJs,

Ambos son adecuados para tareas simples de temporización, pero si las tareas son más complejas y requieren un control más fino, es mejor optar por Promesas y la sintaxis async/await.

Funcionamiento interno

Tanto setTimeout como setInterval dependen del event loop de JavaScript, un mecanismo que permite manejar tareas asíncronas. Cuando usas una de estas funciones:

  1. La tarea programada se registra en la cola de tareas.
  2. Una vez transcurrido el tiempo especificado, el event loop coloca la función en la pila de ejecución.
  3. La función se ejecuta cuando la pila de ejecución esté vacía.

Ejecución diferida setTimeout

setTimeout es una función que ejecuta una función o un bloque de código después de un tiempo específico. La sintaxis básica de setTimeout es:

let timeoutId = setTimeout(función, tiempo, [argumentos...]);
  • función: La función que se ejecutará después de que transcurra el tiempo.
  • tiempo: El tiempo en milisegundos antes de ejecutar la función.
  • [argumentos…]: Opcionalmente, argumentos que se pasarán a la función.

Vamos a verlo con un ejemplo,

function saludar() {
  console.log('Hola, mundo');
}

let timeoutId = setTimeout(saludar, 2000); // Ejecuta `saludar` después de 2 segundos

En este ejemplo, saludar se ejecutará después de 2000 milisegundos (2 segundos).

Cancelación de setTimeout

Para cancelar una acción programada por setTimeout, utiliza clearTimeout, pasando el identificador devuelto por setTimeout.

function mostrarNotificacion() {
  console.log('¡Notificación importante!');
}

let timeoutId = setTimeout(mostrarNotificacion, 3000);

clearTimeout(timeoutId); // Cancela la notificación antes de que se muestre

En este caso, la llamada a clearTimeout evita que mostrarNotificacion se ejecute después de 3 segundos.

Ejecucion periódica setTimeout

setInterval es una función que permite ejecutar una función o un bloque de código de manera repetitiva en intervalos regulares de tiempo. La sintaxis básica de setInterval es:

let intervaloId = setInterval(función, intervalo, [argumentos...]);
  • función: La función que se ejecutará repetidamente.
  • intervalo: El tiempo en milisegundos entre cada ejecución de la función.
  • [argumentos…]: Opcionalmente, argumentos que se pasarán a la función.

Vamos a verlo con un ejemplo,

function saludar() {
  console.log('Hola, mundo');
}

let intervaloId = setInterval(saludar, 1000); // Ejecuta `saludar` cada segundo

En este ejemplo, saludar se ejecutará cada segundo debido al intervalo de 1000 milisegundos.

Cancelación de setTimeout

Para detener la ejecución repetitiva iniciada por setInterval, utiliza clearInterval, pasando el identificador devuelto por setInterval.

function saludar() {
  console.log('Hola, mundo');
}

let intervaloId = setInterval(saludar, 1000);

setTimeout(() => {
  clearInterval(intervaloId); // Detiene la ejecución de `saludar` después de 5 segundos
}, 5000);

En este ejemplo, saludar se ejecuta cada segundo, pero clearInterval detiene la repetición después de 5 segundos.

Sustitución por promesas

Cuando se necesita sincronizar múltiples tareas que dependen del tiempo, considera usar Promise junto con async/await para obtener un control más preciso y una mejor gestión de errores.

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

async function ejecutarTareas() {
  console.log('Inicio');
  await esperar(2000); // Espera 2 segundos
  console.log('Después de 2 segundos');
}

ejecutarTareas();

En este ejemplo,

  • esperar crea una promesa que se resuelve después de un retraso especificado
  • await se usa para pausar la ejecución de ejecutarTareas.

Consideraciones y buenas prácticas

  • Precisión del temporizador: setInterval y setTimeout no garantizan una ejecución precisa al milisegundo. El tiempo especificado es un tiempo mínimo, no un tiempo exacto.
    La función puede no ejecutarse exactamente al final del intervalo debido a la naturaleza del event loop y la carga del sistema.

  • Evitar el anidamiento: El uso de setTimeout y setInterval puede hacer que tu código se vuelva difícil de manejar si los anidas demasiado.

  • Fugas de memoria: Recuerda limpiar los intervalos y timeouts cuando ya no sean necesarios. Si dejas intervalos activos sin cancelarlos, puedes generar fugas de memoria.

En esta página