setTimeout y setInterval en JavaScript, un acercamiento a los hilos

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 y los hilos

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 en JavaScript: o cómo agendar la ejecución de una función

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í:

Ejemplos de setTimeout en JavaScript

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:

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:

Lo que devuelve setTimeout, y clearTimeout

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);

Usos de setTimeout

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.

setInterval: ejecutar código cada determinado tiempo, de manera repetitiva

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.

clearInterval y el id de setInterval

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.

Usos de setInterval en JavaScript

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.

Conclusión

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.