Cómo usar intervalos en JS para ejecutar tareas periódicas

| Última modificación: 15 de marzo de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

En el emocionante mundo del desarrollo web, la eficiencia y la automatización son clave. Para lograrlo, a menudo necesitamos ejecutar tareas de manera periódica, como actualizar datos en una base de datos o realizar acciones específicas en momentos predeterminados. Es aquí donde entran en juego los intervalos en JavaScript. En este artículo, exploraremos cómo usar intervalos en JS para ejecutar tareas de manera periódica y eficiente.

¿Qué son los intervalos en JS para ejecutar tareas?

Los intervalos en JS para ejecutar tareas son una característica esencial que nos permite llevar a cabo tareas repetitivas en intervalos de tiempo específicos. Esto es especialmente útil cuando se trata de mantener datos actualizados o realizar acciones programadas en una aplicación web.

La función setInterval

Para comenzar a trabajar con intervalos en JS para ejecutar tareas, utilizamos la función setInterval. Esta función toma dos argumentos: la función que queremos ejecutar y el intervalo de tiempo (en milisegundos) en el que queremos que se ejecute. Por ejemplo:

setInterval(funcionAejecutar, intervaloDeTiempo);

Aquí, funcionAejecutar es la función que se ejecutará periódicamente e intervaloDeTiempo es el tiempo en milisegundos entre cada ejecución.

Ejemplo práctico

Supongamos que estamos desarrollando una aplicación web que muestra noticias el tiempo real. Para mantener el contenido actualizado, podemos utilizar setInterval de la siguiente manera:

setInterval(actualizarNoticias, 60000); // Actualiza las noticias cada 60 segundos

En este ejemplo, la función actualizarNoticias se ejecutará automáticamente cada 60 segundos, manteniendo así nuestra aplicación actualizada con las últimas noticias.

El método clearInterval y clearTimeout

Cuando trabajamos con intervalos en JS para ejecutar tareas, es importante saber cómo detenerlos si es necesario. Para detener un intervalo, utilizamos el método clearInterval. De forma similar, para detener un temporizador creado con setTimeout usamos el método clearTimeout.

const intervalID = setInterval(funcionAejecutar, intervaloDeTiempo); 
// Para detener el intervalo 
clearInterval(intervalID);

Este código detendrá la ejecución periódica de funcionAejecutar.

Retrasar cada ejecución con setTimeout

A veces, es posible que deseemos ejecutar una función después de un cierto retraso inicial y luego repetirla periódicamente. Podemos lograrlo utilizando setTimeout dentro de setInterval. Aquí hay un ejemplo:

function tareaRepetitiva() { 
console.log("Esta función se ejecuta cada 2 segundos"); 
} 
function ejecutarTarea() { 
setTimeout(function () { 
tareaRepetitiva(); 
ejecutarTarea(); // Llamada recursiva para repetir la tarea 
}, 2000); // Retraso de 2 segundos 
} 
ejecutarTarea(); // Comienza la ejecución

En este caso, tareaRepetitiva se ejecutará cada 2 segundos después de un retraso inicial de 2 segundos.

Funciones a ejecutar y segundo parámetro

Cuando utilizamos setInterval, debemos asegurarnos de que la función que especificamos como primer argumento no requiera argumentos adicionales. Si necesitamos pasar argumentos a la función, podemos utilizar una función anónima para lograrlo. Veamos un ejemplo:

function imprimirMensaje(mensaje) { 
console.log(mensaje); 
} 
const mensaje = "¡Hola, mundo!"; 
// Incorrecto: Esto causará un error 
setInterval(imprimirMensaje(mensaje), 1000); 
// Correcto: Utilizando una función anónima 
setInterval(function () { 
imprimirMensaje(mensaje); 
}, 1000);

En el ejemplo incorrecto, la función imprimirMensaje se ejecutaría inmediatamente en lugar de en intervalos.

Ejemplo completo de intervalos en JS para ejecutar tareas

Para un ejemplo más completo, consideremos una aplicación de chat en tiempo real. Supongamos que queremos verificar si hay nuevos mensajes en el servidor cada 5 segundos y actualizar la interfaz si es necesario. Podríamos lograrlo de la siguiente manera:

function verificarNuevosMensajes() { 
// Lógica para verificar nuevos mensajes en el servidor 
// Actualizar la interfaz si es necesario 
} 
setInterval(verificarNuevosMensajes, 5000); // Verifica cada 5 segundos

En este caso, verificarNuevosMensajes se ejecutará cada 5 segundos para mantener la aplicación actualizada con los mensajes más recientes.

Los intervalos en JS para ejecutar tareas periódicas son una herramienta poderosa para llevar a cabo tareas de manera eficiente en aplicaciones web. Con la función setInterval y la capacidad de detener los intervalos con clearInterval, los desarrolladores pueden mantener sus aplicaciones actualizadas y automatizadas. También es importante recordar cómo manejar las funciones que requieren argumentos adicionales y cómo retrasar ejecuciones específicas utilizando setTimeout. ¡Ahora tienes una sólida comprensión de cómo utilizar intervalos en JS para ejecutar tareas periódicas!

Te enseñamos más en KeepCoding

Si deseas llevar tus habilidades de desarrollo web al siguiente nivel y convertirte en un profesional de alto nivel en el mundo tecnológico, no busques más. Nuestro Desarrollo Web Full Stack Bootcamp es la formación perfecta para ti, ya que te ofrece la oportunidad de aprender las habilidades más demandadas en la industria tecnológica.

Al unirte a nuestro bootcamp, adquirirás conocimientos teóricos y prácticos que te prepararán para una carrera emocionante en el sector IT. La industria tecnológica ofrece salarios competitivos y una estabilidad laboral que pocos otros sectores pueden igualar. ¡No te pierdas esta oportunidad de cambiar tu vida y unirte al emocionante mundo del desarrollo web!

Alberto Casero

Alberto Casero es CTO en Watium, Fundador de Kas Factory & Coordinador del Bootcamp en Desarrollo Web.

Posts más leídos

¡CONVOCATORIA ABIERTA!

Desarrollo Web

Full Stack Bootcamp

Clases en Directo | Profesores en Activo | Temario 100% actualizado