Pausas Asíncronas en JavaScript: Promises vs. Async/Await

JavaScript, al ser monohilo, carece de un equivalente directo a la función sleep() que se encuentra en otros lenguajes. Simular una pausa requiere emplear técnicas asíncronas. Este artículo explora dos enfoques: uno usando setTimeout y Promises, y otro aprovechando la sintaxis más limpia de async/await.

Tabla de Contenido

• Implementando una Función Sleep con Promises
• Implementando una Función Sleep con Async/Await

Implementando una Función Sleep con Promises

El método más directo usa setTimeout dentro de una Promise. Esto evita bloquear el hilo principal, asegurando que tu aplicación permanece responsiva.

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

sleep(2000)
  .then(() => console.log("¡Dormido durante 2 segundos!"))
  .catch(error => console.error("Ocurrió un error:", error));

console.log("Esto se ejecutará antes de que la función sleep complete.");

Explicación:

• sleep(ms): Esta función toma la duración del sueño en milisegundos (ms) como argumento.
• new Promise(resolve => setTimeout(resolve, ms)): Se crea una Promise. setTimeout programa la función resolve para que se llame después de ms milisegundos. Esto resuelve la Promise, señalando el final del sueño.
• .then(): Esto maneja la Promise resuelta, ejecutando el código dentro de ella después de que el sueño se complete.
• .catch(): Esta sección opcional maneja cualquier error que pueda ocurrir durante el tiempo de espera.

Este método es eficiente y evita las dificultades de bloquear el hilo principal. Sin embargo, el uso de .then() puede parecer menos intuitivo para algunos programadores.

Implementando una Función Sleep con Async/Await

Async/await ofrece una solución más legible y posiblemente más elegante. Se basa en el enfoque basado en Promises pero simplifica el flujo asíncrono.

async function sleep(ms) {
  await new Promise(resolve => setTimeout(resolve, ms));
}

async function myFunction() {
  console.log("Comenzando...");
  await sleep(2000);
  console.log("¡Dormido durante 2 segundos!");
}

myFunction();
console.log("Esto se ejecutará antes de que la función sleep complete.");

Explicación:

• async function sleep(ms): La palabra clave async denota una función asíncrona.
• await new Promise(...): La palabra clave await pausa la ejecución de sleep hasta que la Promise se resuelva. Esta pausa no bloquea el hilo principal.
• async function myFunction(): Esta función demuestra cómo usar sleep dentro de una operación asíncrona más grande.

La sintaxis async/await hace que el código asíncrono parezca sincrónico, mejorando la legibilidad y el mantenimiento. Este es generalmente el enfoque preferido por su claridad y facilidad de uso.

Ambos métodos logran el mismo resultado, pero async/await ofrece una sintaxis más moderna y legible para manejar operaciones asíncronas en JavaScript. Evite los bucles de espera ocupada en código de producción; congelarán su aplicación.