Espere X segundos en JavaScript
-
Utilice el
setTimeout()
para esperar X segundos en JavaScript -
Use
promises
yasync/await
para esperar X segundos en JavaScript -
Usar el bucle
for
para implementar la función dedelay
sincrónica en JavaScript
![Espere X segundos en JavaScript](/img/JavaScript/feature-image---javascript-wait-for-x-seconds.webp)
Este tutorial explicará cómo podemos esperar x segundos antes de continuar la ejecución en JavaScript. Implementaremos una función delay(seconds)
que bloqueará el hilo durante x segundos. También explicaremos múltiples técnicas de implementación para este retraso.
Cuando hablamos de implementar una función delay
, el método más utilizado es el asíncrono setTimeout()
.
Utilice el setTimeout()
para esperar X segundos en JavaScript
El método asíncrono setTimeout()
es una de las funciones de orden superior que toma como argumento una función de devolución de llamada, y ejecuta esa función una vez transcurrido el tiempo de entrada. El tiempo dado en el parámetro está en la unidad de ms
.
console.log('I am the first log');
setTimeout(function() {
console.log('I am the third log after 5 seconds');
}, 5000);
console.log('I am the second log');
Resultado:
I am the first log
I am the second log
I am the third log after 5 seconds
Use promises
y async/await
para esperar X segundos en JavaScript
Un método para implementar la función de retardo en el contexto asíncrono es combinar el concepto de async/await
y el concepto de promises
. Podemos crear una función de retardo que devuelva una nueva promises
dentro, que llamaremos el método setTimeout()
con nuestro tiempo de espera deseado. Después de eso, podemos llamar a esa función de delay
dentro de cualquier contexto asincrónico como queramos.
function delay(n) {
return new Promise(function(resolve) {
setTimeout(resolve, n * 1000);
});
}
async function myAsyncFunction() {
// Do what you want here
console.log('Before the delay')
await delay(5);
console.log('After the delay')
// Do what you want here too
}
myAsyncFunction();
Resultado:
Before the delay
After the delay
La función de retardo también puede ser optimizada usando la sintaxis de las flechas en ECMAScript 6 como el siguiente ejemplo:
const delay = (n) => new Promise(r => setTimeout(r, n * 1000));
Usar el bucle for
para implementar la función de delay
sincrónica en JavaScript
Supongamos que no tenemos ningún contexto asincrónico para usar la función delay()
anterior o no queremos usar la función setTimeout()
. En ese caso, podemos implementar una función de retardo síncrona con un bucle normal for
y una clase Date()
para calcular el tiempo.
La implementación de esta función es bastante simple. Se trata de mantener la CPU ocupada durante la cantidad de tiempo deseada. Esto es calculando el tiempo transcurrido y comparándolo con el tiempo de espera para que podamos continuar la ejecución después de él.
function syncDelay(milliseconds) {
var start = new Date().getTime();
var end = 0;
while ((end - start) < milliseconds) {
end = new Date().getTime();
}
}
console.log('Before the delay')
syncDelay(5000);
console.log('After the delay')
Resultado:
Before the delay
After the delay