Para forzar una pausa o retraso de 1 segundo en JavaScript, podemos usar la función setTimeout, pero si queremos una solución mejor, debemos usar la función Promise.
Permítame que me explique.
Hay bastantes formas de decirle a JavaScript que espere 1 segundo. Algunos son mejores que otros y algunos solo deben usarse en circunstancias específicas.
Espera usando setTimeout
Una de las formas más fáciles de lograr un retraso de 1 segundo es usando el función setTimeout que vive en el objeto global de la ventana.
Aquí hay un ejemplo:
console.log("Executed now");
setTimeout(function(){
console.log("Executed after 1 second");
}, 1000);
La función setTimeout toma dos parámetros. Una es la función de devolución de llamada que se ejecutará después de un tiempo específico y la otra es la cantidad de milisegundos que queremos retrasar la ejecución. En este caso, estamos usando 1000ms, que es el equivalente a 1 segundo.
¡Ahora, esto se ve genial y simple! Sin embargo, aquí está el truco:
console.log("Executed now");
setTimeout(function(){
console.log("Executed after 1 second");
}, 1000);
console.log("Executed before the delay, but after the 1st console.log");
Observe cómo nuestra función setTimeout se ejecuta de forma asíncrona y no detendrá el flujo de nuestro programa. Esto significa que todo lo que se defina después en el código se ejecutará antes del retraso.
Es muy probable que esto esté bien en cualquier circunstancia, y la solución puede ser tan simple como colocar el resto del código dentro del tiempo de espera también, pero no es algo que pueda servirnos en todos los escenarios.
Además, si desea seguir agregando retrasos dentro de la misma función retrasada, podemos encontrarnos fácilmente con lo que se conoce como el infierno de devolución de llamada (y eso no es bonito).
Por lo tanto, ¡sigue leyendo!
Espera usando Promise
Otra forma de hacer una espera asíncrona con JavaScript moderno es usando el Función de promesa.
Si combinamos la función setTimeout con promesas, podemos crear un código más legible y colocar nuestro código completo dentro de la misma función (asincrónica).
La principal ventaja en comparación con el método setTimeout que explicamos anteriormente es que podemos reutilizar la función de retraso. Haciendo nuestro código mucho más limpio y simple.
function delay(milliseconds){
return new Promise(resolve => {
setTimeout(resolve, milliseconds);
});
}async function init(){
console.log("Executed now");
await delay(1000);
console.log("Executed after 1 second wait");
await delay(1000);
console.log("Executed after 2 seconds wait");
}
init();
console.log("Executed after the 1st log and before the 2 delays");
Puedes probarlo aquí:
Espera usando un bucle
Esta es la única forma de romper por completo el flujo del usuario y obligar a JavaScript a hacer una pausa sincrónica.
No es la solución perfecta y diría que probablemente no sea deseable. JavaScript es un lenguaje asincrónico y deberíamos aprovecharlo en lugar de usar soluciones piratas para hacer que nuestro código sea sincrónico.
Sin embargo, aquí está cómo hacerlo:
var wait = (ms) => {
const start = Date.now();
let now = start;
while (now - start < ms) {
now = Date.now();
}
}console.log("Executed now");
wait(1000);
console.log("Executed after 1 second");
Básicamente comprobamos la hora actual con el Date y creamos un bucle do… while que solo saldrá si han pasado más de 1000 milisegundos desde que iniciamos el bucle.
¿Ves el problema aquí? Básicamente, tenemos nuestra computadora/navegador ocupado al ejecutar un bucle “sin sentido” y comparar fechas solo por el hecho de obtener nuestro retraso.
Si en vez de 1 segundo tenemos más tiempo de espera lo más probable es que nuestro navegador se bloquee o que nuestra página deje de responder como de costumbre. E incluso si usamos un valor de 1 segundo, es posible que las cosas no siempre funcionen como esperamos. El renderizado DOM ocurre después de que la pila de funciones de JavaScript se ha borrado y el navegador es libre de aceptar nuevos eventos.
Y para probarlo, vea el siguiente ejemplo, donde el archivo console.log se activa después de 1 segundo (como era de esperar), pero ambas escrituras DOM ocurren al mismo tiempo:
Si es posible, evita esta solución en favor de las anteriores.
Conclusión
Desde el 3 formas de hacer que JavaScript espere 1 segundo (o cualquier otro lapso de tiempo), debería estar bien usando cualquiera de los dos primeros.
He usado setTimeout varias veces y funciona perfectamente en la mayoría de las ocasiones.
Sin embargo, la forma moderna de pausar la ejecución con promesas puede brindarle más flexibilidad y crear un código más fácil de mantener a largo plazo.
Artículos relacionados
