事件循环、Promise 和 setTimeout

Question

Consider the following code. I don't quite understand why it works this way.

1. When the code runs first it encounters setTimeout , so it registers it in web APIs (or somewhere else)
2. Then it sees promise and does the same job
3. Then it encounters while loop that blocks main thread for 2 second
4. However by the time this while loop is executed the Promise has been resolved and placed inside microtask queue. Likewise timer has been expired and placed inside macrotask (callback) queue. So when while loop is done we have promise and timer ready to be executed.

I know that microtask queue has higher priority and should be executed before callbacks from macrotask queue, however it is not the case. Please explain why.

 setTimeout(() => { console.log("Timer"); }, 1000); let p = new Promise(res => { setTimeout(() => { res("Promise"); }, 1500); }); p.then(msg => console.log(msg)); let start = new Date().getTime(); let stop = start; while (stop !== start + 2000){ stop = new Date().getTime(); }

Answer 1

A chain is only as strong as its weakest link

Your second setTimeout indeed does begin when you expected it to, but until JS goes looking for whether it has finished, it can't officially finish. That process of looking for whether a setTimeout has finished, is officially a macrotask . The promise resolution (after that) is a microtask.

So for that promise to resolve requires two things to happen: setTimeout timer to be reviewed by JS, and the promise to resolve. The former is the bottleneck in your case.

 setTimeout(() => { console.log("Timer"); }, 1000); let p = new Promise(res => { setTimeout(() => { res("Promise"); }, 1500); console.log("setTimeout #2 has begun ticking") }); p.then(msg => console.log(msg)); let start = new Date().getTime(); let stop = start; while (stop !== start + 2000){ stop = new Date().getTime(); }

Let's test it by shortening the time of the second setTimeout

 setTimeout(() => { console.log("Timer"); }, 1000); let p = new Promise(res => { setTimeout(() => { res("Promise"); }, 500); console.log("setTimeout #2 has begun ticking") }); p.then(msg => console.log(msg)); let start = new Date().getTime(); let stop = start; while (stop !== start + 2000){ stop = new Date().getTime(); }

The second program has the "Promise" printed before "Timer!".

Answer 2

1. The setTimeout() with "Timer" is scheduled for 1 second later. Let's call this timer1 .
2. A promise is created and the executor function runs another setTimeout() that will resolve the promise in 1.5 seconds. Let's call this timer2 .
3. The .then() adds a callback to run after the promise is resolved. Let's call this promiseCallback .
4. The loop starts that will run for 2 seconds.
5. timer1 is supposed to be executed but the thread is busy executing the loop. timer1 is delayed until the thread is not busy by adding it to the macrotask queue.
6. timer2 is supposed to be executed but the thread is busy executing the loop. timer2 is delayed until the thread is not busy by adding it to the macrotask queue.
7. Loop ends. Thread is not busy any more.
8. The microtask queue is empty, so the next thing to run is a macrotask.
9. timer1 runs. It prints "Timer" .
10. The microtask queue is empty, so the next thing to run is a macrotask.
11. timer2 runs. It resolves the promise with the value "Promise" .
12. The microtask queue has one task, so that is the next thing to run.
13. promiseCallback runs. It prints the value that the promise was resolve with: "Promise" .