Blog de conocimiento gratuito: linux, programación, open source, bases de datos, android, frameworks, web e informática en general.
En este post voy a explicar dos funciones muy importantes que existen en JavaScript, me refiero a setTimeout y setInterval.
Ambas funciones nos permiten tener algo parecido a los hilos o threads en JavaScript, pero de una manera muy simple. Y por simple no quiero decir que le falten características, sino que es muy fácil de usar.
Por cierto, setTimeout y setInterval funcionan tanto en los navegadores web como en Node JS.
JavaScript es por naturaleza asíncrono. Tiene callbacks, promesas o await. Las peticiones de AJAX las hace de manera asíncrona y también el funcionamiento con WebWorkers.
Todo esto hace que pensemos de manera asíncrona, con código no bloqueante como en otros lenguajes de programación.
Gracias a esto, setTimeout y setInterval nos permiten abstraer los hilos de manera sencilla.
setTimeout funciona para ejecutar determinada función tiempo después. La sintaxis es:
setTimeout(función, tiempoEnMilisegundosDeRetraso, argumentosQueSePasanALaFunción...)
Normalmente lo vas a ver con una función anónima así:
En ese caso la función se va a ejecutar mil milisegundos después. Otra forma es usando funciones flecha:
Como el primer argumento es una función, igualmente podríamos pasarle el nombre de una función que ya exista. Así:
Para terminar la explicación, si la función que le pasas recibe argumentos, puedes pasar esos argumentos a setTimeout. Veamos un ejemplo:
Se podría decir que a la función que se llama se le pasan los argumentos desde el tercer lugar.
Para concluir analicemos la anatomía de setTimeout en JavaScript:
Cabe mencionar que igualmente se puede definir una función anómina dentro de setTimeout
, y dentro de esa función llamar a otra con argumentos como en el siguiente código de ejemplo:
Al llamar a setTimeout se devuelve un identificador. Más tarde, gracias a ese identificador, podemos cancelar el temporizador.
La sintaxis es:
let id = setTimeout(función, tiempoDeRetraso, argumentosQueSePasan);
Pero lo importante aquí es que gracias a ese id devuelto, podemos cancelar el temporizador (eso sí, debe ser antes de que ocurra) con clearTimeout
así:
clearTimeout(id);
Personalmente lo he usado para indicarle al usuario que la operación fue exitosa y después redireccionarlo a otra página. Por ejemplo, que inserte un nuevo producto y lo redireccione a la página de productos.
Otros usos incluyen muchas cosas que dependen de la aplicación pero en resumen setTimeout funciona para poner un temporizador y ejecutar código cuando se termine el tiempo; con la opción de cancelarlo con clearTimeout.
Sintaxis es como el primo de setTimeout; ya que setInterval hace que determinada función se ejecute cada cierto tiempo.
En cambio, setTimeout
ejecuta una función con retraso y ya, pero setInterval
es repetitivo.
La sintaxis de uso es:
let idIntervalo = setInterval(función, cadaCuantosMilisegundosSeRepite, argumentos);
Para las funciones aplica lo mismo. Podemos definir una función anónima, función flecha o el nombre de una función. Y pasarle argumentos como se hizo con setTimeout. Veamos un ejemplo:
En ese caso se va a imprimir un mensaje cada medio segundo, de manera infinita. Lo repito: podemos pasar el nombre de la función, definir una anónima y pasar argumentos.
Justo como pasa con setTimeout, setInterval devuelve un id. Gracias a ese id podemos cancelar el intervalo llamando a clearInterval
así:
clearInterval(idQueDevolvióSetInterval);
Y eso que se ejecute la función cada cierto tiempo.
Son bastantes, pero uno de ellos podría ser refrescar un reloj con la hora actual. También podría mostrarse un contador y muchas cosas más.
Hemos aprendido a usar setTimeout y setInterval: una forma fácil de trabajar con hilos en JavaScript.
Cabe mencionar que puedes llamar a setTimeout y setInterval infinitas veces; es decir, tener muchos procesos ejecutándose al mismo tiempo.
Eso sí, ten cuidado con las variables y las condiciones de carrera.
Te invito a leer más sobre JavaScript y sobre Node.js.
Un pensamiento en "setTimeout y setInterval en JavaScript, un acercamiento a los hilos"