event loop

event loop

遇微推入微队列,遇宏推入宏队列
macro 中有未执行完毕的 micro 则会等待 micro 执行完毕
宏任务包含微任务的时候会在宏任务中同步任务执行后执行所有微任务
微任务中遇到宏任务时不会等待宏任务,而是直接把宏任务推入宏任务队列中

macro

script 本身
各种请求
计时器

micro

Promise.then()
async/await
process.nextTick

测试一下

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
const p = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
});
});
const p2 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve();
});
});
const p3 = new Promise((resolve, reject) => {
resolve("5");
});
const p4 = new Promise((resolve, reject) => {
reject("6");
});

p.then(() => {
console.log("1");
}).then(() => {
console.log("2");
});
p2.then(() => {
console.log("3");
});
p.then(() => {
console.log("4");
});
p3.then((res) => {
console.log(res);
return "7";
}).then((res) => {
console.log(res);
});
p4.then(null, (res) => {
console.log(res);
});
p3.then((res) => {
console.log("8");
});

// 执行结果是
// 5 -> 6 -> 8 -> 7 -> 1 -> 4 -> 2 -> 3
/** 过程
macro :{
p:{
unsettled_promiseCallbacks:{
1 => newPromise_unsettled_promiseCallbacks:{
2
}
4
}
}
p2:{
unsettled_promiseCallbacks:{
3
}
}
}

micro:{
p3:{
settled_push_queueMicroTask 5:{
5 => newPromise_unsettled_promiseCallbacks:{
7
}
}
}
p4:{
settled_push_queueMicroTask 6:{
6
}
}
p3:{
settled_push_queueMicroTask:{
8
}
}
}
*/

event loop
http://blog.climbed.online/2023/11/24/Web -- Knowledge is infinite/前端/JavaScript/event loop/
作者
Z.K.
发布于
2023年11月24日
许可协议