What is the JavaScript version of sleep()?

Implementing a 'Sleep' Function in JavaScript

Explore various techniques to pause execution in JavaScript, from synchronous blocking to asynchronous delays, and understand their implications.

Unlike many other programming languages, JavaScript does not have a built-in sleep() function that synchronously pauses the execution of the entire program. This is primarily due to its single-threaded, non-blocking nature, especially in browser environments where blocking the main thread would lead to an unresponsive user interface. However, there are several ways to achieve a similar effect, depending on whether you need a synchronous or asynchronous pause, and the context (browser vs. Node.js).

The Asynchronous Approach: setTimeout and Promise

The most common and recommended way to implement a 'sleep' or delay in JavaScript is asynchronously. This means that while a part of your code waits, the rest of the application (like the UI in a browser) remains responsive. This is achieved using setTimeout or by wrapping setTimeout in a Promise.

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

async function demonstrateSleep() {
  console.log('Start');
  await sleep(2000); // Wait for 2 seconds
  console.log('End after 2 seconds');
}

demonstrateSleep();

Implementing an asynchronous sleep using Promise and setTimeout.

sequenceDiagram
    participant Browser/Node.js Event Loop
    participant Your Code
    participant Timer API

    Your Code->>Browser/Node.js Event Loop: Call `sleep(ms)`
    Browser/Node.js Event Loop->>Timer API: `setTimeout(resolve, ms)`
    Note over Your Code,Timer API: Execution continues for other tasks
    Timer API-->>Browser/Node.js Event Loop: Timer expires, `resolve` callback added to queue
    Browser/Node.js Event Loop->>Your Code: `resolve` callback executed, `await` resumes
    Your Code->>Your Code: Continue execution after delay

Sequence diagram illustrating the asynchronous sleep mechanism.

Synchronous Blocking: When and How (with caution)

While generally discouraged, there are specific scenarios where a synchronous delay might be considered, such as in a Web Worker, a Node.js script where blocking is acceptable, or for very short, non-critical delays in specific contexts. However, it's crucial to understand the implications: it will block the entire thread, making your application unresponsive during the delay.

function synchronousSleep(ms) {
  const start = Date.now();
  while (Date.now() < start + ms) {
    // Busy-wait loop
  }
}

console.log('Synchronous Start');
synchronousSleep(2000); // This will block for 2 seconds
console.log('Synchronous End after 2 seconds');

A synchronous blocking sleep function using a busy-wait loop.

Alternative: Atomics.wait (Web Workers and SharedArrayBuffer)

For more advanced scenarios, particularly within Web Workers and when dealing with SharedArrayBuffer, JavaScript offers Atomics.wait. This method allows a thread to synchronously wait until another thread performs a notify operation on a SharedArrayBuffer location. This is a powerful, but complex, feature primarily for low-level synchronization.

// This example requires a SharedArrayBuffer and a Web Worker
// Main thread (or another worker)
const sab = new SharedArrayBuffer(4);
const int32 = new Int32Array(sab);

// In a Web Worker:
// Atomics.wait(int32, 0, 0, 5000); // Wait for 5 seconds or until notified
// console.log('Worker resumed');

// In the main thread (or another worker) to notify:
// Atomics.store(int32, 0, 1);
// Atomics.notify(int32, 0);

Conceptual example of Atomics.wait for synchronous waiting in Web Workers.