macrotask queue and microtask queue priority

Question

bit confused with this description of the macrotask and the microtask queue.

For each loop of the ‘event loop’ one macrotask is completed out of the macrotask queue. After that macrotask is complete, the event loop visits the microtask queue. The entire microtask queue is completed before moving on.

setTimeout(function() {
  console.log('macrotask');
}, 0);

Promise.resolve().then(function() {
  console.log('microtask 1');
}).then(function() {
  console.log('microtask 2');
});

Shouldn't this code output 'macrotask' first? as setTimeout is part of the macrotask queue that is completed before the loop goes to the microtask queue?

Radu Diță · Accepted Answer · 2019-03-16 18:48:18Z

2

The task your code is running is actually a macrotask.

When that finishes (this means evaluating and running your code) the event loop will execute the microtasks that are in the queue. That is the first promise, but that promise adds another promise to the microtask q and the second promise is executed.

After the microtask q is cleared another macrotask is picked, and eventually, the timeout is executed.

answered Mar 16, 2019 at 18:48

Radu Diță

14.3k2 gold badges33 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

totalnoob Over a year ago

then it's event loop 1 => stack => setTimeout => macrotask, Promise => microtask? event loop 2 => microtasks, macrotasks?

Radu Diță Over a year ago

Not really. Is more like this: event loop => setTimeout scheduled => promise scheduled=> end of macrotask; check microtask=>promise 1=> promise 2 scheduled=>promise 2 resolved=> end microtask; check macrotask => execute setTimeout. I’ll add a schema tomorrow

totalnoob Over a year ago

so just one loop of the event loop itself is finishing a macrotask?

Pravin Divraniya · Accepted Answer · 2019-09-28 05:26:57Z

At the execution of any JS file, the JS engine wraps the contents in a function and associates the function with an event either start or launch. The JS engine emits the start event, the events are added to the task queue (as a macrotask).

On initialization, the JS engine first pulls off the first task in the macrotask queue and executes the callback handler. Thus, our code is run.

So we see the script running is the first macrotask queued. So first JSEngine adds all the synchronous code in script as a macrotask in the event-loop queue. Then it sees setTimeout which is another macrotask so it is logged in a separate task in the event-loop queue. Then it sees Promise which is a microtask and adds it in microtask queue.

The microtask queue is processed after callbacks as long as no other JavaScript is mid-execution and at the end of each task.

So the sequence of task queue, in this case, is Script=>Promise1=>Promise2=>setTimeout

As there is no synchronous code in the script so the execution of script prints nothing. Then Engine executes microtask queue(promise-1,promise-2) and in the end macrotask which is setTimeout.

Note:- This is default behavior and may differ in different browsers.

Collectives™ on Stack Overflow

macrotask queue and microtask queue priority

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related