Asynchronous Pauses in JavaScript: Promises vs. Async/Await

JavaScript, being single-threaded, lacks a direct equivalent to the sleep() function found in other languages. Simulating a pause requires employing asynchronous techniques. This article explores two approaches: one using setTimeout and Promises, and another leveraging the cleaner async/await syntax.

Table of Contents

• Implementing a Sleep Function with Promises
• Implementing a Sleep Function with Async/Await

Implementing a Sleep Function with Promises

The most straightforward method uses setTimeout within a Promise. This avoids blocking the main thread, ensuring your application remains responsive.

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

sleep(2000)
  .then(() => console.log("Slept for 2 seconds!"))
  .catch(error => console.error("An error occurred:", error));

console.log("This will execute before the sleep function completes.");

Explanation:

• sleep(ms): This function takes the sleep duration in milliseconds (ms) as an argument.
• new Promise(resolve => setTimeout(resolve, ms)): A Promise is created. setTimeout schedules the resolve function to be called after ms milliseconds. This resolves the Promise, signaling the end of the sleep.
• .then(): This handles the resolved Promise, executing the code within it after the sleep is complete.
• .catch(): This optional section handles any errors that might occur during the timeout.

This method is efficient and avoids the pitfalls of blocking the main thread. However, the use of .then() might seem less intuitive to some programmers.

Implementing a Sleep Function with Async/Await

Async/await offers a more readable and arguably more elegant solution. It builds upon the Promise-based approach but simplifies the asynchronous flow.

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

async function myFunction() {
  console.log("Starting...");
  await sleep(2000);
  console.log("Slept for 2 seconds!");
}

myFunction();
console.log("This will execute before the sleep function completes.");

Explanation:

• async function sleep(ms): The async keyword denotes an asynchronous function.
• await new Promise(...): The await keyword pauses the execution of sleep until the Promise resolves. This pause doesn’t block the main thread.
• async function myFunction(): This function demonstrates how to use sleep within a larger asynchronous operation.

The async/await syntax makes asynchronous code appear synchronous, improving readability and maintainability. This is generally the preferred approach for its clarity and ease of use.

Both methods achieve the same result, but async/await offers a more modern and readable syntax for handling asynchronous operations in JavaScript. Avoid busy-waiting loops in production code; they will freeze your application.