¿Cómo funcionan los intervalos en JavaScript?

Contenido del Bootcamp Dirigido por: | Última modificación: 18 de octubre de 2024 | Tiempo de Lectura: 3 minutos

Algunos de nuestros reconocimientos:

Premios KeepCoding

Los intervalos en JavaScript son una herramienta fundamental para controlar la ejecución de código de manera periódica. Son especialmente útiles cuando se necesita ejecutar una función a intervalos regulares o después de un retraso específico. En este artículo, exploraremos cómo funcionan los intervalos en JavaScript, qué son el método setInterval y la función callback, y cómo se relacionan con palabras clave como setTimeout, clearInterval y clearTimeout. Si estás interesado en el desarrollo web y quieres entender mejor esta parte crucial de JavaScript, ¡sigue leyendo!

¿Qué son los intervalos en JavaScript?

En el contexto de JavaScript, un intervalo es una forma de programar la ejecución periódica de una función. Los intervalos en JavaScript son ideales para tareas repetitivas o acciones que deben realizarse en momentos específicos. Esto puede ser desde actualizar la hora en un reloj digital hasta cargar nuevos datos de un servidor.

El método setInterval

El método setInterval es el corazón de los intervalos en JavaScript. Permite ejecutar una función especificada a intervalos regulares de tiempo. La sintaxis básica de setInterval es la siguiente:

setInterval(funcion, tiempo);
  • funcion: es la función que se ejecutará periódicamente.
  • tiempo: es el intervalo de tiempo, en milisegundos, entre cada ejecución de la función.

Por ejemplo, si se desea que una función llamada actualizarHora se ejecute cada segundo, puedes hacerlo de la siguiente manera:

setInterval(actualizarHora, 1000);

La función callback

La función que se pasa como argumento a setInterval se llama función callback. Es esencial para que los intervalos funcionen correctamente. La función callback es lo que se ejecutará en cada intervalo de tiempo especificado. Aquí hay un ejemplo simple de una función callback:

function actualizarHora() { 
const ahora = new Date(); 
console.log(`Hora actual: ${ahora.toLocaleTimeString()}`); 
}

En este caso, actualizarHora es la función callback que se ejecutará cada segundo, como se definió en el setInterval.

¿Cómo se relaciona con setTimeout?

A veces, es necesario ejecutar una función después de un retraso específico en lugar de a intervalos regulares. Para esto, JavaScript proporciona el método setTimeout. La principal diferencia entre setTimeout y setInterval es que setTimeout ejecutará la función solo una vez después de un retraso, mientras que setInterval la ejecutará repetidamente a intervalos regulares.

setTimeout(funcion, tiempo);

Limpiando intervalos y tiempos de espera

En algunos casos, es importante detener la ejecución de un intervalo o tiempo de espera antes de que continúe indefinidamente. Para hacer esto, JavaScript proporciona los métodos clearInterval y clearTimeout.

  • clearInterval: se utiliza para detener la ejecución de una función que se está ejecutando con setInterval.
  • clearTimeout: se utiliza para detener la ejecución de una función que se está ejecutando con setTimeout.

Ambos métodos requieren el ID del intervalo o tiempo de espera que se desea detener. Estos ID se generan automáticamente cuando se llama a setInterval o setTimeout.

const intervalID = setInterval(funcion, tiempo);
 // Para detener el intervalo 
clearInterval(intervalID);

En resumen, los intervalos en JavaScript son una herramienta poderosa para controlar la ejecución de código a intervalos regulares. El método setInterval permite ejecutar una función específica a intervalos de tiempo definidos y la función callback es la que se ejecuta en cada intervalo. Además, setTimeout es útil cuando se necesita una ejecución única después de un retraso específico. Por otro lado, clearInterval y clearTimeout se utilizan para detener la ejecución de intervalos y tiempos de espera, respectivamente.

Cambia tu vida con KeepCoding

Si deseas afianzar tus conocimientos sobre los intervalos en JavaScript y convertirte en un desarrollador web competente, considera apuntarte al Desarrollo Web Full Stack Bootcamp de KeepCoding. Este bootcamp te proporcionará las habilidades que necesitas para destacar en la industria tecnológica, que está en constante crecimiento y demanda profesionales cualificados. Al completar esta formación, estarás listo para una carrera emocionante en la que podrás disfrutar de salarios altos y una estabilidad laboral que no encontrarás en otros sectores. ¡No pierdas esta oportunidad de cambiar tu vida y adentrarte en el mundo del desarrollo web con KeepCoding!

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