Who is first between macrotask and microtask in javascript?

Question

I'm confused which task is taken first by event loop.

The reason is like below.

Stackoverflow answer from this

After this macrotask has finished, all available microtasks will be processed

Similar example from this blog article

setTimeout(() => console.log('Macro task'), 0);
Promise.resolve().then(() => console.log('Micro task'));

So, it is very confusing for me. What I understood till now is this.

Code that is not callback function is inserted into call stack right away.
Callback function of setTimeout() is inserted into Macro Task Queue.
Callback function of Promise is inserted into Micro Task Queue.
When call stack is empty, event loop takes task from Micro Task Queue and runs.
After execution of all micro tasks, event loop takes task from Macro Task Queue and runs.

This process is my understanding and am I right?

score 2 · Answer 1 · answered Feb 27 '20 at 03:23

2

Micro-task queue is checked right after the script finishes, I think. It is before the checking of macro-task queue.

See here for detailed information.

answered Feb 27 '20 at 03:23

Jim Jin

score 2 · Answer 2 · answered Feb 27 '20 at 04:09

Because the script itself is treated as a macrotask so that at the end the enqueued microtasks are executed.

So the promise is a microtask, setTimeout callback is a macrotask, but the script is a macrotask as well.

As a result, script -> promise -> setTimeout

2 Answers2