Modern JavaScript

Atomics.waitAsync

Non-blocking atomic operations for SharedArrayBuffer (ES2024)

Find videos you like?

Save to resource drawer for future reference!

What is Atomics.waitAsync? ⚡

A non-blocking version of Atomics.wait! Instead of blocking the thread while waiting, it returns a Promise that resolves when the condition is met - perfect for multi-threaded JavaScript with Web Workers!

Advanced Feature!

This is for advanced multi-threading scenarios with SharedArrayBuffer. Most apps don't need this!

The Problem It Solves 🎯

Blocking vs non-blocking

❌ Atomics.wait (Blocking)

// Blocks the entire thread!
const result = Atomics.wait(
  buffer, index, expectedValue
);

// Thread is frozen until notified
// Can't do anything else
// UI freezes (if on main thread)

✅ Atomics.waitAsync (Non-blocking)

// Returns a Promise!
const { async, value } = Atomics.waitAsync(
  buffer, index, expectedValue
);

// Thread continues running
if (async) {
  value.then(() => {
    console.log('Notified!');
  });
}

Basic Usage 📝

Simple Example

// Shared buffer between threads
const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

// Wait for value to change from 0
const { async, value } = Atomics.waitAsync(view, 0, 0);

if (async) {
  // Returns a promise
  value.then((result) => {
    console.log('Result:', result); // 'ok' or 'timed-out'
  });
} else {
  // Resolved immediately
  console.log('Immediate result:', value);
}

Practical Example 💡

Worker Communication Pattern

// main.js (Main Thread)
const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

// Create worker
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });

// Wait for worker to signal completion
const { async, value } = Atomics.waitAsync(view, 0, 0);

if (async) {
  console.log('Waiting for worker...');
  
  value.then((result) => {
    if (result === 'ok') {
      console.log('Worker completed!');
      console.log('Result:', view[0]);
    }
  });
}

// Main thread continues running!
console.log('Main thread not blocked');


// worker.js (Worker Thread)
self.onmessage = ({ data }) => {
  const view = new Int32Array(data.buffer);
  
  // Do heavy work
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
  }
  
  // Write result
  Atomics.store(view, 0, result);
  
  // Notify main thread
  Atomics.notify(view, 0, 1);
};

With Timeout

const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

// Wait with 5 second timeout
const { async, value } = Atomics.waitAsync(
  view,
  0,      // index
  0,      // expected value
  5000    // timeout in ms
);

if (async) {
  value.then((result) => {
    if (result === 'ok') {
      console.log('Value changed!');
    } else if (result === 'timed-out') {
      console.log('Timeout reached');
    }
  });
}

Return Value Structure 📊

Understanding the Result

const result = Atomics.waitAsync(view, index, value);

// Result object has two properties:

// 1. async: boolean
//    - true: Returns a Promise (async wait)
//    - false: Resolved immediately (sync)

// 2. value: Promise<string> | string
//    If async = true:
//      - Promise that resolves to:
//        - 'ok': Notified by Atomics.notify()
//        - 'timed-out': Timeout reached
//    
//    If async = false:
//      - 'not-equal': Current value doesn't match expected
//      - 'timed-out': Timed out immediately

// Example handling
const { async, value } = Atomics.waitAsync(view, 0, 0);

if (async) {
  // Async case - value is a Promise
  await value; // 'ok' or 'timed-out'
} else {
  // Sync case - value is a string
  console.log(value); // 'not-equal' or 'timed-out'
}

Key Points 🎯

Non-Blocking

Thread continues executing - no freeze!

Promise-Based

Returns Promise for async/await compatibility

SharedArrayBuffer Required

Only works with SharedArrayBuffer for multi-threading

Advanced Use Case

For complex multi-threaded applications with Workers

Quick Summary 📝

⚡

Non-Blocking

Doesn't freeze the thread while waiting

🔄

Promise-Based

Returns Promise for async operations

🧵

Multi-Threading

For Web Workers and SharedArrayBuffer

✨

ES2024

Latest atomic operation enhancement

Previous Topic

RegExp v Flag

Enhanced regex with set notation and properties (ES2024).

Next Topic

ArrayBuffer Transfer

Transferring and resizing ArrayBuffer (ES2024).

Ask a Question

Have a question about Atomics.waitAsync? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

Modern JavaScript

Atomics.waitAsync

Non-blocking atomic operations for SharedArrayBuffer (ES2024)

Find videos you like?

Save to resource drawer for future reference!

What is Atomics.waitAsync? ⚡

Advanced Feature!

This is for advanced multi-threading scenarios with SharedArrayBuffer. Most apps don't need this!

The Problem It Solves 🎯

Blocking vs non-blocking

❌ Atomics.wait (Blocking)

// Blocks the entire thread!
const result = Atomics.wait(
  buffer, index, expectedValue
);

// Thread is frozen until notified
// Can't do anything else
// UI freezes (if on main thread)

✅ Atomics.waitAsync (Non-blocking)

// Returns a Promise!
const { async, value } = Atomics.waitAsync(
  buffer, index, expectedValue
);

// Thread continues running
if (async) {
  value.then(() => {
    console.log('Notified!');
  });
}

Basic Usage 📝

Simple Example

// Shared buffer between threads
const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

// Wait for value to change from 0
const { async, value } = Atomics.waitAsync(view, 0, 0);

if (async) {
  // Returns a promise
  value.then((result) => {
    console.log('Result:', result); // 'ok' or 'timed-out'
  });
} else {
  // Resolved immediately
  console.log('Immediate result:', value);
}

Practical Example 💡

Worker Communication Pattern

// main.js (Main Thread)
const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

// Create worker
const worker = new Worker('worker.js');
worker.postMessage({ buffer: sharedBuffer });

// Wait for worker to signal completion
const { async, value } = Atomics.waitAsync(view, 0, 0);

if (async) {
  console.log('Waiting for worker...');
  
  value.then((result) => {
    if (result === 'ok') {
      console.log('Worker completed!');
      console.log('Result:', view[0]);
    }
  });
}

// Main thread continues running!
console.log('Main thread not blocked');


// worker.js (Worker Thread)
self.onmessage = ({ data }) => {
  const view = new Int32Array(data.buffer);
  
  // Do heavy work
  let result = 0;
  for (let i = 0; i < 1000000; i++) {
    result += Math.sqrt(i);
  }
  
  // Write result
  Atomics.store(view, 0, result);
  
  // Notify main thread
  Atomics.notify(view, 0, 1);
};

With Timeout

const sharedBuffer = new SharedArrayBuffer(4);
const view = new Int32Array(sharedBuffer);

// Wait with 5 second timeout
const { async, value } = Atomics.waitAsync(
  view,
  0,      // index
  0,      // expected value
  5000    // timeout in ms
);

if (async) {
  value.then((result) => {
    if (result === 'ok') {
      console.log('Value changed!');
    } else if (result === 'timed-out') {
      console.log('Timeout reached');
    }
  });
}

Return Value Structure 📊

Understanding the Result

const result = Atomics.waitAsync(view, index, value);

// Result object has two properties:

// 1. async: boolean
//    - true: Returns a Promise (async wait)
//    - false: Resolved immediately (sync)

// 2. value: Promise<string> | string
//    If async = true:
//      - Promise that resolves to:
//        - 'ok': Notified by Atomics.notify()
//        - 'timed-out': Timeout reached
//    
//    If async = false:
//      - 'not-equal': Current value doesn't match expected
//      - 'timed-out': Timed out immediately

// Example handling
const { async, value } = Atomics.waitAsync(view, 0, 0);

if (async) {
  // Async case - value is a Promise
  await value; // 'ok' or 'timed-out'
} else {
  // Sync case - value is a string
  console.log(value); // 'not-equal' or 'timed-out'
}

Key Points 🎯

Non-Blocking

Thread continues executing - no freeze!

Promise-Based

Returns Promise for async/await compatibility

SharedArrayBuffer Required

Only works with SharedArrayBuffer for multi-threading

Advanced Use Case

For complex multi-threaded applications with Workers

Quick Summary 📝

⚡

Non-Blocking

Doesn't freeze the thread while waiting

🔄

Promise-Based

Returns Promise for async operations

🧵

Multi-Threading

For Web Workers and SharedArrayBuffer

✨

ES2024

Latest atomic operation enhancement

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

RegExp v Flag

ArrayBuffer Transfer

JavaScript Code Editor

Building Your Learning Module...

Atomics.waitAsync

What is Atomics.waitAsync? ⚡

Advanced Feature!

❌ Atomics.wait (Blocking)

✅ Atomics.waitAsync (Non-blocking)

Simple Example

Worker Communication Pattern

With Timeout

Understanding the Result

Non-Blocking

Promise-Based

SharedArrayBuffer Required

Advanced Use Case

Quick Summary 📝

Non-Blocking

Promise-Based

Multi-Threading

ES2024

RegExp v Flag

ArrayBuffer Transfer

JavaScript Code Editor

Atomics.waitAsync

What is Atomics.waitAsync? ⚡

Advanced Feature!

❌ Atomics.wait (Blocking)

✅ Atomics.waitAsync (Non-blocking)

Simple Example

Worker Communication Pattern

With Timeout

Understanding the Result

Non-Blocking

Promise-Based

SharedArrayBuffer Required

Advanced Use Case

Quick Summary 📝

Non-Blocking

Promise-Based

Multi-Threading

ES2024