Cómo esperar X segundos en JavaScript

JavaScript es un lenguaje de programación utilizado en el desarrollo web. A menudo es necesario pausar la ejecución del código durante unos segundos antes de continuar con la siguiente tarea. Hay varias formas de hacer esto en JavaScript, y en este artículo exploramos las diferentes opciones disponibles para esperar durante X segundos en una variedad de situaciones.

Uso de setTimeOut()

La función setTimeOut() es una forma sencilla de hacer que una función se ejecute después de un cierto período de tiempo. Se utiliza para hacer una pausa en la ejecución de un programa de JavaScript durante X segundos.

La syntax básica es la siguiente:
setTimeout(function(){console.log("Hola, mundo!");}, 5000);

El primer argumento de la función setTimeOut es la función que se desea ejecutar después del tiempo especificado en milisegundos. El segundo argumento especifica el número de milisegundos antes de que se ejecute la función.

También podemos cancelar la ejecución en cualquier momento utilizando la función clearTimeout(). Por ejemplo:

var pausar = setTimeout(function () {console.log("Hola");}, 5000);
clearTimeout(pausar);

Uso del método setInterval()

El método setInterval() es similar a setTimeOut() pero se ejecuta continuamente hasta que se le indica que pare. Este método se utiliza para ejecutar una función después de un tiempo determinado y repetidamente después de cada intervalo de tiempo especificado.

La syntax básica es la siguiente:

setInterval(función, tiempo);

setInterval(function() {console.log("hola");}, 3000);

Usando Promesas y Async / Await

Con la introducción de las promesas y async / await en ECMAScript 6, JavaScript obtuvo una forma más elegante de implementar el tiempo de espera. En vez de utilizar setTimeOut() o setInterval(), podemos usar promesas y async / await.

La syntax básica es la siguiente:

function wait(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}

async function espera() {
console.log("Esperando...");
await wait(5000);
console.log("Esto se imprime después de 5 segundos");
}

Conclusión

Ahora tienes varias formas de esperar durante X segundos en JavaScript. setTimeOut(), setInterval(), Promesas y async / await, todos ofrecen diferentes soluciones para la pausa de ejecución.

Preguntas frecuentes

¿Cuál es la diferencia entre setTimeOut() e setInterval()?

La función setTimeOut() se utiliza para hacer una pausa en la ejecución de un programa de JavaScript durante X segundos, y luego ejecuta la función una vez. Por otro lado, setInterval() se utiliza para ejecutar una función después de un tiempo determinado y repetidamente después de cada intervalo de tiempo especificado.

¿Cómo cancelar una función setTimeOut()?

Para cancelar una función setTimeOut(), podemos utilizar la función clearTimeout().

¿Cómo esperar durante varios segundos y ejecutar una función?

Podemos utilizar either setTimeOut() o setInterval() para esperar durante X segundos y luego ejecutar una función. También podemos utilizar promesas y async / await.

¿Puedo utilizar setTimeOut() en conjunto con setInterval()?

Sí, podemos utilizar setTimeOut() en conjunto con setInterval() para crear una animación básica en JavaScript.

Ejemplos de códigos o comandos:

• setTimeout(función, tiempo);
• setInterval(función, tiempo);
• async function espera() {
console.log("Esperando...");
await wait(5000);
console.log("Esto se imprime después de 5 segundos");
}

Cómo cambiar el color de fondo en JavaScript

Cómo decodificar entidades HTML utilizando JavaScript

Cómo obtener valores únicos de una matriz en JavaScript

Encontrar y eliminar objetos en un arreglo basado en un valor clave en JavaScript

Cómo establecer el valor de un campo de entrada en JavaScript

Cómo realizar "Splicing" de cadenas en JavaScript

Cómo Desencadenar un Evento de Clic en JavaScript

Cómo desplazarse a un elemento usando JavaScript

Cómo formatear una fecha como YYYY-MM-DD en JavaScript