¿Cómo utilizar el método setTimeout en JavaScript?

El método setTimeout() de Javascript se utiliza para ejecutar un bloque de código después de un tiempo predeterminado. A continuación veremos un ejemplo de uso del método setTimeout para crear un Temporizador.

1function  Temporizador(segundos) {
2    if (segundos  >  0) {
3        console.log(`Faltan ${segundos} segundos`);
4        setTimeout(() => {
5            Temporizador(segundos - 1);
6        }, 1000);
7    } else {
8        console.log("Temporizador finalizado");
9    }
10}
11
12Temporizador(5);

( output ) de la función Temporizador.

1Faltan 5 segundos
2Faltan 4 segundos
3Faltan 3 segundos
4Faltan 2 segundos
5Faltan 1 segundos
6Temporizador finalizado

La función Temporizador() recibe como parámetro un número que representa la cantidad de segundos que deseas retrasar la ejecución. Esta función muestra en consola el número de segundos restantes y haciendo uso del método setTimeout() de forma recursiva llama a la función una y otra vez cada 1000 milisegundos / 1 segundo hasta que el número de segundos restantes sea 0 entonces muestra en consola el mensaje Temporizador finalizado.

¿Qué es y para qué sirve el método setTimeout en Javascript?

El método setTimeout de Javascript es un método que te permite ejecutar una porción de código después de un tiempo predeterminado. Este es un método muy útil que puedes usar para crear diversas funcionalidades como temporizadores, notificaciones, alarmas y muchas cosas más! Básicamente lo puedes usar cada vez que necesites retrasar el tiempo de ejecución de un bloque de código.

Este método recibe dos parámetros:

1function  mostrarMensaje() {
2    console.log("Hola mundo!");
3}
4
5setTimeout(
6    mostrarMensaje, // función con el código que deseas ejecutar
7    1000 // retraso numérico en milisegundos
8);

El primer parámetro es la función con el código que deseas ejecutar después de que termine el tiempo de retraso indicado, esta función también puede ser una arrow function setTimeout(() => console.log("Hola mundo!") , 1000).

El segundo parámetro es el retraso en milisegundos que deseas implementar, este parámetro debe de ser de tipo numérico.

Es importante señalar que los navegadores almacenan el retraso como un entero de 32 bits por esto debes tener cuidado de no usar retrasos mayores a 2147483647 milisegundos que es lo mismo que alrededor de (24,8) días ya que esto provoca un error en el sistema y la ejecución del código en el setTimeout() se realiza de forma inmediata como se muestra en el siguiente ejemplo.

1console.time("Primer setTimeout");
2setTimeout(() => {
3    console.timeEnd("Primer setTimeout");
4}, 2000);
5
6console.time("Segundo setTimeout");
7setTimeout(() => {
8    console.timeEnd("Segundo setTimeout");
9}, 2_147_483_648);

( output ) del código anterior

1  TimeoutOverflowWarning: 2147483648 does not fit into a 32-bit signed integer
2
3  Segundo setTimeout: 14.6 milisegundos
4  Primer setTimeout: 2.1 segundos

En este ejemplo usamos los métodos de consola de Javascript console.time() y console.timeEnd() para medir el tiempo de ejecución del código, vemos que el primer setTimeout se ejecuta correctamente después de 2 segundos, mientras que el segundo setTimeout al tener un retraso demasiado grande envía una alerta a la consola y el código se ejecuta de forma inmediata.

También puedes cancelar la ejecución de este método haciendo uso de la función clearTimeout() como se muestra en el siguiente ejemplo.

1const resultado = setTimeout(() => {
2    console.log("Primer setTimeout");
3}, 2000);
4
5clearTimeout(resultado); // esta línea cancela la ejecución del primer setTimeout
6
7setTimeout(() => {
8    console.log("Segundo setTimeout");
9}, 1000);
10
11console.log(resultado); 

( output ) del código anterior

valor numérico entero positivo
Segundo setTimeout

El método setTimeout() retorna un número entero positivo que puede variar dependiendo del entorno de ejecución o navegador que estés utilizando, este valor se lo puedes pasar como parámetro a la función clearTimeout() para cancelar la ejecución del código.

En este ejemplo vemos que el código primero muestra en la consola el valor numérico que retorna el método setTimeout() y luego muestra el mensaje "Segundo setTimeout" pero el mensaje "Primer setTimeout" no lo muestra ya que el método clearTimeout() canceló la ejecución de este.

Casos de uso del método setTimeout()

El método setTimeout() tiene múltiples casos de uso, veremos algunos de ellos a continuación.

Crear un Temporizador

Uno de los usos más comunes que le puedes dar al método setTimeout() es para crear un temporizador

código HTML

1<!DOCTYPE html>
2<html  lang="en">
3  <head>
4    <script  src="script.js" defer ></script>
5  </head>
6  <body  style="display: grid; place-content: center; height: 100vh">
7    <div id="temporizador" style="height: 50px; width: 70px; display: grid; place-content: center; border-radius: 7px; font-size: 20px; border: 2px solid black;">
8      00
9    </div>
10  </body>
11</html>

código Javascript

1const temporizador = document.getElementById("temporizador");
2function Temporizador(segundos) {
3  if (segundos > 0) {
4    temporizador.textContent = segundos;
5    setTimeout(() => {
6      Temporizador(segundos - 1);
7    }, 1000);
8  } else {
9    temporizador.textContent = "00";
10    alert("Temporizador finalizado");
11  }
12}
13Temporizador(30); // 30 segundos

Para crear un temporizador con HTML y el método setTimeout() primero debemos crear un archivo HTML con una estructura básica y un div con el id temporizador <div id="temporizador">, luego creamos un archivo Javascript y en este archivo creamos una función que recibe como parámetro un número entero que representa la cantidad de segundos que recibe el temporizador, esta función actualiza el valor del div por la cantidad de segundos restantes de forma recursiva una y otra vez hasta que el número de segundos restantes sea 0 entonces crea una alerta con el mensaje Temporizador finalizado.

Actualizar información de una página web

Otro uso que le puedes dar al método setTimeout() de Javascript es actualizar la información de una página web.

1const  Url = "https://ejemplo.com/productos/precios";
2let  precios = [];
3
4async  function  modificarPrecios() {
5    const  response  =  await  fetch(Url);
6    const  data  =  await  response.json();
7    precios  =  data;
8
9    setTimeout(() => {
10        modificarPrecios();
11    }, 1000 * 60 * 30); // retraso de 30 minutos
12}
13
14modificarPrecios();

Imagina que tienes una aplicación de productos donde los precios de los productos suelen variar constantemente. En este caso puedes usar el método setTimeout() para hacer un fetch de la información actualizada cada 30 minutos y así poder actualizar la información en tu página web. En este ejemplo creamos una función asíncrona para hacer el llamado a la API y guardar la información en el array precios = [], esta función realiza esta tarea una y otra vez de forma recursiva cada 30 minutos.

Es importante resaltar que esta misma funcionalidad también la puedes conseguir con otro método de Javascript llamado setInterval que es un método muy similar a setTimeout() pero a diferencia de este que ejecuta el código una sola vez, el método setInterval() ejecuta el codigo con el retrazo de tiempo una y otra vez hasta que la ejecución sea cancelada con el metodo clearInterval().

Animar un elemento HTML

Otra forma en la que puedes usar el método setTimeout() de Javascript es para animar un elemento HTML.

código HTML

1<!DOCTYPE html>
2<html  lang="en">
3  <head>
4    <script  src="script.js"  defer></script>
5  </head>
6  <body  style="display: flex; align-items: center; height: 100vh">
7    <div id="circulo" style="transition: left 2000ms ease-in; height: 50px; width: 50px; border-radius: 50%; background-color: lightblue; position: relative; left: 0px;"
8    ></div>
9  </body>
10</html>

código Javascript

1const  circulo  =  document.getElementById("circulo");
2function  animarCirculo() {
3  if (circulo.style.left  ===  "70vw") {
4    circulo.style.left  =  "30vw";
5    setTimeout(() => {
6      animarCirculo();
7    }, 2000);
8  } else {
9    circulo.style.left  =  "70vw";
10    setTimeout(() => {
11      animarCirculo();
12    }, 2000);
13  }
14}
15animarCirculo();

Este ejemplo crea una pequeña animación con HTML y el método setTimeout() de Javascript que simula una pelota rebotando de izquierda a derecha, para crear esta animación primero creamos un archivo HTML con una estructura básica y un div que contenga una transition en la propiedad left con una duración de 2000ms / 2 segundos <div style="transition: left 2000ms ease-in;" , luego creamos un archivo Javascript con una función que mueve el elemento de izquierda a derecha cada 2000ms / 2 segundos de forma recursiva una y otra vez para crear esta animación indefinidamente, es importante que la duración en la transición del elemento y el retraso temporal en el método setTimeout() tengan el mismo valor para que la animación funcione correctamente.

Conclusión

En conclusión el método setTimeout() de javascript te permite ejecutar una porción de código en un tiempo predeterminado lo cual puede ser muy útil y tiene amplios usos en la programación, este método se puede usar de muchas formas y tiene multiples usos en este artículo se mencionan solo algunos de ellos, si quieres conocer más a profundidad este método te sugiero que visites la página oficial de mozilla javascript sobre el método settimeout.

Si te interesa conocer más sobre el lenguaje de programación Javascript puedes revisar este artículo sobre aprender a programar en Javascript, aquí puedes encontrar información muy interesante y aprende este lenguaje desde cero con ejemplos de código, videotutoriales y muchos más recursos que te serán muy útiles para practicar y conocer más sobre el lenguaje de programación Javascript. Puedes leer más sobre este y otros temas en el Blog de 4Geeks.