setInterval JavaScript: La Guía Definitiva de Uso

4 minuto(s)

En esta página:

El uso de temporizadores es fundamental en el desarrollo web moderno.

Mientras que setTimeout sirve para ejecutar una acción una sola vez, setInterval es la herramienta diseñada para la repetición constante.

A continuación, presento la guía definitiva de setInterval en el lenguaje de programación JavaScript, actualizada a las mejores prácticas actuales y modernas.

¿Qué es setInterval?

El método setInterval() ejecuta una función de manera repetitiva, con un retardo de tiempo fijo entre cada llamada. Pertenece a la interfaz Window (en navegadores) y al objeto Global (en Node.js).

Sintaxis Básica

Su sintaxis es la siguiente:

Sintáxis básica setInterval JavaScript — Puedes ver que puedes pasarle una función, retraso y argumentos

Veamos que significa cada elemento de la sintáxis:

función: El bloque de código que quieres ejecutar.
retraso: El tiempo en milisegundos (1000 ms = 1 segundo).
argumentos (opcionales): Valores que se pasan directamente a la función ejecutada.

Conforme practiques te familiarizarás mejor con estos elementos.

Cómo usar setInterval (Ejemplos Reales)

Ahora te voy a compartir algunos ejemplos reales del uso de setInterval():

1. Contador Simple

Este es el uso más común: actualizar un valor en pantalla cada segundo.


let contador = 0;

const intervaloId = setInterval(() => {
    contador++;
    console.log(`Segundos transcurridos: ${contador}`);
}, 1000);

let contador = 0;

const intervaloId = setInterval(() => {

contador++;

console.log(`Segundos transcurridos: ${contador}`);

}, 1000);

A continuación puedes ver el código en acción:

2. Pasar Argumentos a la Función

Muchos usuarios intentan pasar argumentos de forma incorrecta.

La manera limpia es esta:


function saludar(nombre, mensaje) {
    console.log(`${mensaje}, ${nombre}!`);
}

// Pasamos los argumentos después del tiempo
setInterval(saludar, 2000, "Usuario", "Hola de nuevo");

function saludar(nombre, mensaje) {

console.log(`${mensaje}, ${nombre}!`);

}

// Pasamos los argumentos después del tiempo

setInterval(saludar, 2000, "Usuario", "Hola de nuevo");

Veamos el resultado del código anterior:

Cómo detener un Intervalo: clearInterval

Si no detienes un intervalo, este seguirá consumiendo memoria y CPU indefinidamente, incluso si el usuario cambia de sección en tu aplicación.

Para detenerlo, usa el método clearInterval().


let vueltas = 0;

const id = setInterval(() => {
    vueltas++;
    console.log("Corriendo...");

    if (vueltas === 5) {
        clearInterval(id);
        console.log("¡Meta alcanzada! Intervalo detenido.");
    }
}, 1000);

let vueltas = 0;

const id = setInterval(() => {

vueltas++;

console.log("Corriendo...");

if (vueltas === 5) {

clearInterval(id);

console.log("¡Meta alcanzada! Intervalo detenido.");

}

}, 1000);

Veamos el resultado a continuación:

Con ello tu aplicación dejará de consumir recursos innecesarios.

Diferencias Críticas: setInterval vs. setTimeout anidado

En la actualidad, los desarrolladores senior suelen preferir el setTimeout recursivo sobre setInterval. ¿Por qué?

Te lo explico mejor con la siguiente tabla comparativa:

Característica	setInterval	setTimeout Recursivo
Consistencia	El tiempo cuenta desde que inicia la ejecución.	El tiempo cuenta desde que termina la ejecución.
Solapamiento	Si la función tarda más que el intervalo, pueden amontonarse.	Garantiza un espacio real entre ejecuciones.
Precisión	Menos preciso en tareas pesadas.	Más flexible y seguro para el rendimiento.

Para conocer mejor acerca del setTimeout recursivo veamos el siguiente ejemplo en código JavaScript:


function miTarea() {
    console.log("Tarea ejecutada");
    // Esperamos a que termine la lógica para programar la siguiente
    setTimeout(miTarea, 1000); 
}
setTimeout(miTarea, 1000);

function miTarea() {

console.log("Tarea ejecutada");

// Esperamos a que termine la lógica para programar la siguiente

setTimeout(miTarea, 1000);

}

setTimeout(miTarea, 1000);

Veamos el código trabajando:

A continuación te comparto cierto aspectos que debes considerar en cuanto a rendimiento y seguridad.

Consideraciones de Rendimiento y Seguridad

Recuerda que:

Los navegadores modernos limitan los intervalos a un mínimo de 4 milisegundos si hay más de 5 niveles de anidamiento.
Para ahorrar batería, los navegadores (Chrome, Safari, Edge) reducen la frecuencia de los intervalos a 1 segundo o más cuando la pestaña no está visible.
No uses Strings en setInterval(“console.log(‘hola’)”, 1000). Es un riesgo de seguridad similar a eval(). Usa siempre funciones anónimas o referencias de funciones.

Compatibilidad de setInterval() con Navegadores

En la siguiente imagen puedes ver que compatibilidad tiene con los navegadores. La información la he obtenido de MDN Web Docs:

Sabías que los IDs de setInterval son números enteros consecutivos, lo que permite detener “por la fuerza” todos los intervalos activos de una página usando un simple bucle que recorra hasta el ID más alto.

Preguntas Frecuentes (FAQ)

Vamos a despejar algunas dudas sobre setInterval en JavaScript:

1. ¿Por qué mi setInterval se acelera o se vuelve loco?

Esto sucede casi siempre porque estás declarando el intervalo dentro de un evento (como un click) o en el renderizado de un componente (en frameworks como React) sin limpiarlo antes. Cada vez que se ejecuta el evento, se crea un nuevo proceso.

Solución: Llama siempre a clearInterval(id) antes de iniciar uno nuevo para asegurar que solo haya un proceso activo.

2. ¿Es posible cambiar el tiempo del intervalo mientras está corriendo?

No directamente. Una vez que inicias un setInterval con 1000ms, ese ID está “atado” a ese tiempo.

Solución: Debes detener el intervalo actual con clearInterval() y volverlo a iniciar con el nuevo valor de tiempo.

3. ¿Qué pasa si la función tarda más que el intervalo?

Si programas un intervalo cada 100ms, pero tu función tarda 150ms en procesar datos, los navegadores modernos evitarán que las llamadas se “amontonen” inmediatamente, pero esto causará latencia y un comportamiento errático en la interfaz.

Recomendación: En estos casos, usa el setTimeout recursivo mencionado anteriormente.

4. ¿Consume mucha memoria el uso de setInterval?

El intervalo en sí no, pero lo que hay dentro de la función sí puede causar “Memory Leaks” (fugas de memoria) si hace referencia a objetos grandes que nunca se liberan, o si olvidas detener el intervalo cuando el usuario cierra un modal o cambia de página.

5. ¿Puedo usar setInterval en Node.js?

Sí, funciona exactamente igual, pero con una pequeña diferencia técnica: en el navegador el ID es un número, mientras que en Node.js es un objeto con métodos adicionales como unref() y ref().

Conoce estos 10 Prompts de IA para Código Limpio en JavaScript.

Conclusión

En la actualidad setInterval sigue siendo un pilar fundamental de JavaScript para tareas de repetición constante. Sin embargo, la evolución del lenguaje y la prioridad por la eficiencia energética de los dispositivos nos obligan a ser más cuidadosos.

Puntos clave para recordar:

Gestión Responsable: Nunca inicies un intervalo sin guardar su ID para poder limpiarlo.
Alternativas Modernas: Para animaciones, prefiere requestAnimationFrame, para procesos pesados que deben ser precisos, considera un Web Worker.
Rendimiento: Ten en cuenta el throttling de los navegadores en pestañas inactivas para no frustrar la experiencia del usuario.

Dominar setInterval no es solo saber cómo iniciarlo, sino saber cuándo es la herramienta adecuada y cuándo es momento de detenerlo.

Síguenos en nuestras Redes Sociales para que no te pierdas nuestros próximos contenidos.