由一道Promise题目引发的事件循环机制的思考

先看下题目

可以先试着解答一下，看下自己的分析方式有没有偏差

console.log('start')
new Promise((resolve, reject) => {
    setTimeout(() => {
        console.log(0)
        resolve()
    }, 0)
    console.log(1)
}).then((res) => {
    console.log(2)
    let p = new Promise((resolve, reject) => {
        console.log(3)
        resolve()
    })
    p.then((res) => {
        console.log(4)
    })
    p.then((res) => {
        console.log(5)
    }).then(res => {
        console.log(6)
    })
    return p
}).then(res => {
    console.log(7)
    new Promise((resolve, reject) => {
        console.log(8);
        resolve();
    })
        .then(() => {
            console.log(9);
        })
        .then(() => {
            console.log(10)
        })
}).then(res => {
    console.log(11)
})
console.log('end')
复制代码

公布结果:
start -> 1 -> end -> 0 -> 2 -> 3 -> 4 -> 5 -> 6 -> 7 -> 8 -> 9 -> 11 -> 10

EventLoop

这段代码包含了同步任务，宏任务和微任务,代码的执行顺序离不开事件循环机制，那什么是EventLoop？

「script（整体代码块）是个宏任务？」

当同时存在两个script代码块时，会先执行第一个script代码块中的同步代码，如果过程中创建了微任务，同步任务执行完后会去执行所有的微任务（清空微任务队列），之后才会开启第二个script代码。由此可以理解script代码块是宏任务。

分析代码

• script代码块开始执行（宏任务队列的第一个任务开始执行）

• 执行同步代码

• 遇到宏任务，将回调函数放入宏任务队列

• 遇到微任务，将回调函数放入微任务队列

• 执行所以微任务，直至微任务队列清空

• 开启下一轮循环