JavaScript: How to Wait or Sleep

JavaScript is a single-threaded language notorious for its non-blocking I/O model, doesn’t have a built-in sleep function like some other programming languages. However, there are multiple ways to introduce a delay or pause execution in JavaScript, each with its own pros and cons.

Best Solution: Using Promises and async/await

With the advent of ES6 (ECMAScript 2015), JavaScript introduced Promises, which provide a more elegant way to handle asynchronous operations. With ES8 (ECMAScript 2017), async/await syntax was introduced, which makes working with Promises even easier.

Here’s how you can create a sleep function using Promises and async/await:

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

async function demo() {
  console.log('Taking a break...');
  await sleep(2000);
  console.log('Two seconds later');
}

demo();

In the above code, the sleep function returns a Promise that resolves after a specified delay. In the demo function, we use the await keyword to pause execution until the Promise is resolved.

Note: The the most vital component of the above function is the setTimeout() call. It’s the function that actually introduces the delay and keeps the time. So before deciding to use this approach, effectively blocking your code execution, perhaps you should consider using the setTimeout() function by itself. Let’s explore this option next.

Using setTimeout()

The most common way to introduce a delay in JavaScript is by using the setTimeout() function. setTimeout() allows you to execute a function after a specified delay (in milliseconds). Here’s a basic example:

console.log('Hello');
setTimeout(function() {
  console.log('World');
}, 2000);

In the above code, “Hello” will be logged to the console immediately, and “World” will be logged after a delay of 2 seconds.

By using setTimeout() you can delay the execution of a part of your code without blocking the execution of the rest of your program.

Using Generator Functions and yield

ES6 also introduced generator functions, which allow you to pause and resume execution within a function. Combined with Promises, this can be used to create a sleep function:

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

function* demo() {
  console.log('Taking a break...');
  yield sleep(2000);
  console.log('Two seconds later');
}

let generator = demo();
generator.next();

In the above code, the demo function is a generator function, as indicated by the *. The yield keyword pauses execution until the Promise is resolved.

Using Atomics.wait()

The Atomics.wait() method is a part of the JavaScript’s Atomics API, which provides low-level atomic operations on shared memory. This method can be used to put the main thread to sleep, but it’s generally not recommended for typical web development tasks, as it can only be used in a Web Worker context.

Here’s how you can use it:

let sab = new SharedArrayBuffer(1024);
let int32 = new Int32Array(sab);

Atomics.wait(int32, 0, 0, 2000);

In the above code, Atomics.wait() will block the main thread for 2 seconds, or until another thread wakes it up.

Final Words

Although JavaScript doesn’t have a built-in sleep function, there are multiple ways to introduce a delay in your code. Whether you’re using setTimeout(), Promises with async/await, generator functions with yield, or even the low-level Atomics.wait() method, it’s essential to understand how these methods work and when to use them.

Remember, JavaScript is single-threaded and uses an event-driven, non-blocking I/O model. Introducing delays in your code can potentially block the execution of other code, leading to a poor user experience. Always strive to write efficient, non-blocking code and use these sleep methods judiciously.