Métodos setTimeout y setInterval en JavaScript

Autor: | Última modificación: 16 de agosto de 2022 | Tiempo de Lectura: 4 minutos
Temas en este post:

¿Te has encontrado alguna vez con la necesidad de controlar el tiempo en el que se ejecuta una acción? Esta es una necesidad muy común a la hora de programar cualquier proyecto. Ya sea porque queremos crear repeticiones periódicas o porque una acción debe esperar a ser ejecutada, controlar el tiempo puede ser muy útil. Por ello, en este post, te enseñaremos cómo usar los métodos setTimeout y setInterval en JavaScript.

¿Qué son los métodos setTimeout y setInterval en JavaScript?

Los métodos setTimeout y setInterval en JavaScript son dos métodos nativos de este lenguaje de programación que nos permiten controlar el tiempo de ejecución de nuestras acciones. Para esto, ambos pasan dos parámetros: la función que define la acción a ejecutar y el valor de tiempo tras el cual debe ejecutarse.

Recuerda que cuando pasamos una función como parámetro de un método, le llamamos callback. Para conocer más sobre este concepto, te invitamos a leer nuestros posts sobre qué son los callbacks en JavaScript y cómo utilizarlos. La idea detrás de un callback es dejar programado lo que queremos que suceda cuando algo más tenga lugar. Este algo puede ser desde una acción por parte del usuario (hacer clic) hasta la culminación de un proceso del navegador (descargar archivos).

En el caso de los métodos setTimeout y setInterval en JavaScript, el algo que está esperando la acción para ser ejecutada es un valor de tiempo. Entonces, ambos métodos definen que la función o callback se ejecutará cuando transcurra x cantidad de tiempo.

A continuación, te explicamos exactamente qué hace cada uno de los métodos setTimeout y setInterval en JavaScript:

setTimeout

El método setTimeout de JavaScript nos permite ejecutar una función pasados unos milisegundos. Es decir, este método indica un tiempo, en términos de milisegundos, tras el cual se ejecutará la función que le pasemos. Entonces, cuando creamos un setTimeout, debemos escribir dos parámetros dentro de sus paréntesis. Primero, pasaremos la función a ejecutar. Luego, el valor de milisegundos que deben transcurrir desde que el programa lee la línea de código setTimeout hasta que se ejecuta la función.

A continuación, encontrarás un ejemplo de cómo se utiliza el método setTimeout en JavaScript:

function callback ( ) {

console.log (‘Terminé!’);

}

console.log (‘Empiezo’);

setTimeout (callback, 2000)

Lo que hacen las líneas de código anteriores es crear la función callback que ejecuta la acción de pintar en pantalla el string ‘Terminé!’. Esta función se llama como parámetro dentro del método setTimeout, en el que también se define un tiempo de 2000 milisegundos. Entonces, el resultado de este código será que, primero, veremos el string ‘Empiezo’ y, transcurridos dos segundos, veremos el string ‘Terminé!’.

setInterval

Los métodos setTimeout y setInterval en JavaScript funcionan de una manera muy similar. La diferencia es que, mientras que el setTimeout se ejecuta una única vez tras determinado tiempo, el método setInterval se ejecuta cada cierto tiempo. Es decir, este método nos permite ejecutar una función periódicamente. Al igual que el método setTimeout, el método setInterval define este tiempo en términos de milisegundos.

A continuación, te mostramos un ejemplo de cómo se escribe el método setInterval en JavaScript. En este ejemplo, hemos definido el método setInterval, que se encarga de ejecutar la función console.log (‘Beeeeep!’) cada segundo. Este tiempo lo hemos definido con milisegundos, por lo que 1000 es igual a un segundo. Además, hemos definido la variable times, que aumentará una unidad con cada iteración (operador aritmético ++).

let times = 0

const intervalID = setInterval (() => {

console.log (‘Beeeeep!’)

times++

}, 1000)

Al igual que en un bucle, podemos programar el final de las iteraciones del método setInterval. Para ello, debemos usar la palabra clave clearInterval. Con ella, podemos controlar la duración de un intervalo o el número de repeticiones de un intervalo. Para poder utilizar esta palabra clave, debemos pasarle un identificador de intervalo que llame al método que queremos detener. Por ello, te recomendamos guardar este tipo de métodos dentro de una variable fácil de reconocer y llamar posteriormente.

Entonces, ya que hemos asignado el método a una constante intervalID, podemos usar esta constante para pasar el método por clearInterval. A continuación, crearemos una condición bajo la cual se detienen las iteraciones de este método:

let times = 0

const intervalID = setInterval (() => {

console.log (‘Beeeeep!’)

times++

if (times > 2500) {

clearInterval (intervalID)

}, 1000)

En las líneas de código anteriores, hemos definido que el método intervalID se detendrá cuando el contador times llegue a ser mayor a 2500.

¿Te animas a seguir aprendiendo?

Después de leer este post, sabes en qué consisten los métodos setTimeout y setInterval en JavaScript, fundamentales para el control del tiempo en las acciones ejecutadas. Sin embargo, ¡todavía queda mucho por aprender de este lenguaje de programación! Por ello, te invitamos a ser parte de nuestro Desarrollo Web Full Stack Bootcamp, donde aprenderás a dominar este y otros lenguajes de programación para la web como CSS y HTML. ¿Te animas a seguir aprendiendo? ¡Te esperamos!

👉 Descubre más del Desarrollo Web Full Stack Bootcamp ¡Descarga el temario!

👉 Prueba el Bootcamp Gratis por una Semana ¡Empieza ahora mismo!

👉 Conoce nuestros otros Bootcamps en Programación y Tecnología

[email protected]

¿Sabías que hay más de 40.000 vacantes para desarrolladores de software sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso! 

¿Sabías que hay más de 40.000 vacantes para desarrolladores web sin cubrir en España? 

En KeepCoding llevamos desde 2012 guiando personas como tú a áreas de alta empleabilidad y alto potencial de crecimiento en IT con formación de máxima calidad.

 

Porque creemos que un buen trabajo es fuente de libertad, independencia, crecimiento y eso ¡cambia historias de vida!


¡Da el primer paso!