JavaScript setTimeout(): Cómo establecer un temporizador en JavaScript o esperar durante N segundos

Artículo original escrito por Nathan Sebhastian
Artículo original JavaScript setTimeout() – How to Set a Timer in JavaScript or Sleep for N Seconds
Traducido y adaptado por Santiago Yanguas

Este tutorial te ayudará a entender cómo funciona el método incorporado de JavaScript setTimeout() con ejemplos de código intuitivos.

Como usar setTimeout() en JavaScript

El método setTimeout() permite ejecutar un fragmento de código, una vez transcurrido un tiempo determinado. Puedes pensar en el método como una forma de establecer un temporizador para ejecutar código de JavaScript en un momento determinado.

Por ejemplo, el código siguiente imprimirá "Hola Mundo" en la consola de JavaScript después de que hayan pasado 2 segundos:

setTimeout(function(){
    console.log("Hola Mundo");
}, 2000);

console.log("setTimeout() Ejemplo...");

El código anterior imprimirá primero "setTimeout() ejemplo..." en la consola, luego imprimirá "Hola Mundo" una vez que hayan pasado dos segundos desde que el código haya sido ejecutado por JavaScript.

La sintaxis del método setTimeout() es la siguiente:

setTimeout(function, millisegundos, parametro, parametro, ...);

El primer parámetro del método setTimeout() es una función de JavaScript para ejecutar. Puedes escribir la función directamente al pasarla o también puedes hacer referencia a una función con nombre como se muestra a continuación:

function saludos(){
  console.log("Hola Mundo");
}

setTimeout(saludos);

A continuación, puede pasar el parámetro milisegundos, que será la cantidad de tiempo que JavaScript, esperará antes de ejecutar el código.

Un segundo es igual a mil milisegundos, así que si quieres esperar 3 segundos, tienes que pasar 3000 como segundo argumento:

function saludos(){
  console.log("Hola Mundo");
}

setTimeout(saludos, 3000);

Si omite el segundo parámetro, entonces setTimeout() ejecutará inmediatamente la función pasada sin esperar.

Por último, también puedes pasar parámetros adicionales al método setTimeout() que puede utilizar dentro de la función de la siguiente manera:

function saludos(nombre, rol){
  console.log(`Hola, mi nombre es ${nombre}`);
  console.log(`Yo soy ${rol}`);
}

setTimeout(saludos, 3000, "Nathan", "Programador");

Ahora puedes estar pensando, "¿por qué no pasar los parámetros directamente a la función?"

Esto se debe a que si pasas los parámetros directamente así:

setTimeout(greeting("Nathan", "Software developer"), 3000);

Entonces JavaScript ejecutará inmediatamente la función sin esperar, porque estás pasando una llamada a la función y no una referencia a la función como primer parámetro.

Por eso, si necesitas pasar algún parámetro a la función, debes hacerlo desde el método setTimeout().

Pero honestamente, nunca encontré la necesidad de pasar parámetros adicionales al método setTimeout(), en mi papel de Desarrollador de Software, así que no te preocupes por ello. ?

Cómo cerrar el método setTimeout

También puede evitar que el método setTimeout() ejecute la función utilizando el método clearTimeout().

El método clearTimeout() requiere el id devuelto por setTimeout() para saber qué método setTimeout() debe cerrar:

clearTimeout(id);

Este es un ejemplo del método clearTimeout() en acción:

const timeoutId = setTimeout(function(){
    console.log("Hola Mundo");
}, 2000);

clearTimeout(timeoutId);
console.log(`Tiempo de espera ID ${timeoutId} ha sido limpiado`);

Si tienes varios métodos setTimeout(), entonces necesitas guardar los IDs devueltos por cada llamada al método y luego llamar al método clearTimeout() tantas veces como sea necesario para borrarlos todos.

Conclusión

El método setTimeout() de JavaScript es un método incorporado que permite temporizar la ejecución de una determinada función. Es necesario pasar la cantidad de tiempo a esperar en milisegundos, lo que significa que para esperar un segundo, es necesario pasar mil milisegundos.

Para cancelar la ejecución de un método setTimeout(), es necesario utilizar el método clearTimeout(), pasando el valor del ID devuelto al llamar al método setTimeout().

Gracias por leer este tutorial

Si quieres aprender más sobre JavaScript, puedes consultar mi sitio en sebhastian.com, donde he publicado más de 100 tutoriales sobre programación con JavaScript, todos con explicaciones fáciles de entender y ejemplos de código.

Los tutoriales incluyen manipulación de cadenas de texto, manipulación de fechas, métodos de arreglos y objetos, soluciones de algoritmos de JavaScript y mucho más.