¿Sabes qué son los métodos setTimeout y setInterval? ¿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 setTimeout y setInterval 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, aparte de setTimeout y setInterval, 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, setTimeout y setInterval, 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 de setTimeout en JS 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 de setTimeout en JS 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 JS, 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 setInterval 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 de setInterval, 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.
