|
1 |
| -The console output is: 1 7 3 5 2 6 4. |
| 1 | +输出结果为:1 7 3 5 2 6 4。 |
2 | 2 |
|
3 |
| -The task is quite simple, we just need to know how microtask and macrotask queues work. |
| 3 | +这道题其实很简单,我们只需要知道微任务和宏任务队列是如何工作的。 |
4 | 4 |
|
5 |
| -Let's see what's going on, step by step. |
| 5 | +让我们一起一步一步地看看发生了什么。 |
6 | 6 |
|
7 | 7 | ```js
|
8 | 8 | console.log(1);
|
9 |
| -// The first line executes immediately, it outputs `1`. |
10 |
| -// Macrotask and microtask queues are empty, as of now. |
| 9 | +// 第一行立即执行,它输出 `1`。 |
| 10 | +// 到目前为止,宏任务队列和微任务队列都是空的。 |
11 | 11 |
|
12 | 12 | setTimeout(() => console.log(2));
|
13 |
| -// `setTimeout` appends the callback to the macrotask queue. |
14 |
| -// - macrotask queue content: |
| 13 | +// `setTimeout` 将回调添加到宏任务队列。 |
| 14 | +// - 宏任务队列中的内容: |
15 | 15 | // `console.log(2)`
|
16 | 16 |
|
17 | 17 | Promise.resolve().then(() => console.log(3));
|
18 |
| -// The callback is appended to the microtask queue. |
19 |
| -// - microtask queue content: |
| 18 | +// 将回调添加到微任务队列。 |
| 19 | +// - 微任务队列中的内容: |
20 | 20 | // `console.log(3)`
|
21 | 21 |
|
22 | 22 | Promise.resolve().then(() => setTimeout(() => console.log(4)));
|
23 |
| -// The callback with `setTimeout(...4)` is appended to microtasks |
24 |
| -// - microtask queue content: |
| 23 | +// 带有 `setTimeout(...4)` 的回调被附加到微任务队列。 |
| 24 | +// - 微任务队列中的内容: |
25 | 25 | // `console.log(3); setTimeout(...4)`
|
26 | 26 |
|
27 | 27 | Promise.resolve().then(() => console.log(5));
|
28 |
| -// The callback is appended to the microtask queue |
29 |
| -// - microtask queue content: |
| 28 | +// 回调被添加到微任务队列 |
| 29 | +// - 微任务队列中的内容: |
30 | 30 | // `console.log(3); setTimeout(...4); console.log(5)`
|
31 | 31 |
|
32 | 32 | setTimeout(() => console.log(6));
|
33 |
| -// `setTimeout` appends the callback to macrotasks |
34 |
| -// - macrotask queue content: |
| 33 | +// `setTimeout` 将回调添加到宏任务队列 |
| 34 | +// - 宏任务队列中的内容: |
35 | 35 | // `console.log(2); console.log(6)`
|
36 | 36 |
|
37 | 37 | console.log(7);
|
38 |
| -// Outputs 7 immediately. |
| 38 | +// 立即输出 7 |
39 | 39 | ```
|
40 | 40 |
|
41 |
| -To summarize, |
| 41 | +总结一下: |
42 | 42 |
|
43 |
| -1. Numbers `1` и `7` show up immediately, because simple `console.log` calls don't use any queues. |
44 |
| -2. Then, after the main code flow is finished, the microtask queue runs. |
45 |
| - - It has commands: `console.log(3); setTimeout(...4); console.log(5)`. |
46 |
| - - Numbers `3` и `5` show up, while `setTimeout(() => console.log(4))` adds the `console.log(4)` call to the end of the macrotask queue. |
47 |
| - - The macrotask queue is now: `console.log(2); console.log(6); console.log(4)`. |
48 |
| -3. After the microtask queue becomes empty, the macrotask queue executes. It outputs `2`, `6`, `4`. |
| 43 | +1. 立即输出数字 `1` 和 `7`,因为简单的 `console.log` 调用没有使用任何队列。 |
| 44 | +2. 然后,主代码流程执行完成后,开始执行微任务队列。 |
| 45 | + - 其中有命令行:`console.log(3); setTimeout(...4); console.log(5)`。 |
| 46 | + - 输出数字 `3` 和 `5`,`setTimeout(() => console.log(4))` 将 `console.log(4)` 调用添加到了宏任务队列的尾部。 |
| 47 | + - 现在宏任务队列中有:`console.log(2); console.log(6); console.log(4)`。 |
| 48 | +3. 当微任务队列为空后,开始执行宏任务队列。并输出 `2`、`6` 和 `4`。 |
49 | 49 |
|
50 |
| -Finally, we have the output: `1 7 3 5 2 6 4`. |
| 50 | +最终,我们的到的输出结果为:`1 7 3 5 2 6 4`。 |
0 commit comments