SpiderJS

Event Loop and Queues in Asynchronous JavaScript Asynchronous JavaScript enables non-blocking operations through the event loop, which manages task execution. The event loop checks the call stack and queues to ensure efficient code execution. It handles two queues: the Task Queue (for callbacks like setTimeout) and the Microtask Queue (for promises and async, await), with microtasks having higher priority. A queue is a data structure that holds tasks or microtasks awaiting execution. The Task Queue manages lower-priority tasks (e.g., timers), while the Microtask Queue processes high-priority tasks (e.g., promise resolutions) right after the stack clears. Examples Demonstrating Priority Basic Example console.log("Start"); setTimeout(() => console.log("Timeout"), 0); Promise.resolve().then(() => console.log("Promise")); console.log("End"); Output: "Start", "End", "Promise", "Timeout" Explanation: The call stack runs synchronously ("Start", "End"). The promise microtask executes next due to higher priority, followed by the setTimeout task. Advanced Example console.log("Start"); setTimeout(() => { console.log("Timeout 1"); Promise.resolve().then(() => console.log("Timeout Promise")); }, 0); Promise.resolve().then(() => { console.log("Promise 1"); setTimeout(() => console.log("Nested Timeout"), 0); }); console.log("End"); Output: "Start", "End", "Promise 1", "Timeout 1", "Timeout Promise", "Nested Timeout" Explanation: The stack executes ("Start", "End"). The first microtask ("Promise 1") runs, then the first timeout ("Timeout 1") with its nested microtask ("Timeout Promise"). Finally, the nested timeout ("Nested Timeout") executes, showing microtasks outprioritizing tasks. Resources MDN Web Docs: Event Loop MDN Web Docs: Promises JavaScript Info: Event Loop Eloquent JavaScript: Asynchronous Programming W3Schools: JavaScript Async

May 4, 2025 - 13:17

Event Loop and Queues in Asynchronous JavaScript

Asynchronous JavaScript enables non-blocking operations through the event loop, which manages task execution. The event loop checks the call stack and queues to ensure efficient code execution. It handles two queues: the Task Queue (for callbacks like setTimeout) and the Microtask Queue (for promises and async, await), with microtasks having higher priority.

A queue is a data structure that holds tasks or microtasks awaiting execution. The Task Queue manages lower-priority tasks (e.g., timers), while the Microtask Queue processes high-priority tasks (e.g., promise resolutions) right after the stack clears.

Examples Demonstrating Priority

Basic Example

   console.log("Start");

   setTimeout(() => console.log("Timeout"), 0);
   Promise.resolve().then(() => console.log("Promise"));

   console.log("End");

Output: "Start", "End", "Promise", "Timeout"
Explanation: The call stack runs synchronously ("Start", "End"). The promise microtask executes next due to higher priority, followed by the setTimeout task.

Advanced Example

   console.log("Start");

   setTimeout(() => {
     console.log("Timeout 1");
     Promise.resolve().then(() => console.log("Timeout Promise"));
   }, 0);

   Promise.resolve().then(() => {
     console.log("Promise 1");
     setTimeout(() => console.log("Nested Timeout"), 0);
   });

   console.log("End");

Output: "Start", "End", "Promise 1", "Timeout 1", "Timeout Promise", "Nested Timeout"
Explanation: The stack executes ("Start", "End"). The first microtask ("Promise 1") runs, then the first timeout ("Timeout 1") with its nested microtask ("Timeout Promise"). Finally, the nested timeout ("Nested Timeout") executes, showing microtasks outprioritizing tasks.