事件循环 event loop

2018-09-08

只有一个 `event loop` ，但任务队列可有多个：

cover

new Promise((resolve, reject) => {
  resolve( )
}).then(( ) => {
  console.log(1)
  new Promise((resolve, reject) => {
    resolve( )
  }).then(( ) => {
    console.log(2)
  })
  setTimeout(( ) => { console.log(3) }, 0)
})

console.log(4)

setTimeout(( ) => { console.log(5) }, 0)

// 4
// 1
// 2
// 5
// 3

``

首先将所有代码放入 `macrotask queue` 中执行：

step one

↑ 将匿名函数放入 microtask queue 中排队等待。

step two

↑ 控制台输出 ‘4’。

step three

↑ 放入 macrotask queue 中排队等待执行。

microtask queue :

1	microtask1：/* P1.then 中的回调函数 */

`macrotask queue` 任务执行结束，检查 `microtask queue` ，发现 `task1`，将 `task1` 推出执行：

step four

↑ 控制台输出 ‘1’。

setp five

↑ 将 P2.then 中的匿名函数放入 microtask queue 中。

microtask queue:

1	maicrotask2: /* P2.then 中的回调函数 () => console.log(2)*/

step six

↑ 放入 macrotask queue 中排队等待执行。

macrotask queue：

1 2	macrotask1: () => console.log(5) macortask2: () -> console.log(3)

`microtask1` 执行结束，检查 `microtask queue` 发现 `microtask2`，推出执行：

step seven

↑ 控制台输出 ‘2’。

#####

`microtask2` 执行结束，检查 `microtask queue` ，`microtask queue` 为空，转而执行 `macrotask queue` 中的任务：

macrotask1 执行，控制台输出 ‘5’。

macrotask2 执行，控制台输出 ‘3’。

`macrotask queue` 执行结束，检查 `microtask queue`， `mirotask queue`为空，event loop 结束。

最后更新： 2018年09月09日 22:40

赏