50 lines
No EOL
1.8 KiB
Markdown
50 lines
No EOL
1.8 KiB
Markdown
The console output is: 1 7 3 5 2 6 4.
|
|
|
|
The task is quite simple, we just need to know how microtask and macrotask queues work.
|
|
|
|
Let's see what's going on, step by step.
|
|
|
|
```js
|
|
console.log(1);
|
|
// The first line executes immediately, it outputs `1`.
|
|
// Macrotask and microtask queues are empty, as of now.
|
|
|
|
setTimeout(() => console.log(2));
|
|
// `setTimeout` appends the callback to the macrotask queue.
|
|
// - macrotask queue content:
|
|
// `console.log(2)`
|
|
|
|
Promise.resolve().then(() => console.log(3));
|
|
// The callback is appended to the microtask queue.
|
|
// - microtask queue content:
|
|
// `console.log(3)`
|
|
|
|
Promise.resolve().then(() => setTimeout(() => console.log(4)));
|
|
// The callback with `setTimeout(...4)` is appended to microtasks
|
|
// - microtask queue content:
|
|
// `console.log(3); setTimeout(...4)`
|
|
|
|
Promise.resolve().then(() => console.log(5));
|
|
// The callback is appended to the microtask queue
|
|
// - microtask queue content:
|
|
// `console.log(3); setTimeout(...4); console.log(5)`
|
|
|
|
setTimeout(() => console.log(6));
|
|
// `setTimeout` appends the callback to macrotasks
|
|
// - macrotask queue content:
|
|
// `console.log(2); console.log(6)`
|
|
|
|
console.log(7);
|
|
// Outputs 7 immediately.
|
|
```
|
|
|
|
To summarize,
|
|
|
|
1. Numbers `1` и `7` show up immediately, because simple `console.log` calls don't use any queues.
|
|
2. Then, after the main code flow is finished, the microtask queue runs.
|
|
- It has commands: `console.log(3); setTimeout(...4); console.log(5)`.
|
|
- Numbers `3` и `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue.
|
|
- The macrotask queue is now: `console.log(2); console.log(6); console.log(4)`.
|
|
3. After the microtask queue becomes empty, the macrotask queue executes. It outputs `2`, `6`, `4`.
|
|
|
|
Finally, we have the output: `1 7 3 5 2 6 4`. |