事件循环

终极事件循环

将下面👇的问题搞清楚基本事件循环就过关了

console.log('script start');

async function async1() {
    await async2();
    console.log('async1')
}

async function async2() {
    console.log('async2')
}

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

new Promise(resolve => {
    console.log('promise');
    resolve();
}).then(() => {
    console.log('promise1')
}).then(() => {
    console.log('promise2')
})

Promise.resolve().then(() => {
    console.log('promise resolve');
})

async1();

console.log('script end');

// 输出顺序如下：
// script start
// promise
// async2
// script end
// promise1
// promise resolve
// async1
// promise2
// settimeout

// 解析版：
console.log('script start'); // 【第一个输出】

async function async1() {
    await async2();
    console.log('async1') // 又一个then 放入微任务 3   【第七个输出】
}

async function async2() {
    console.log('async2') // 【第三个输出】
}

setTimeout(() => {
    console.log('setTimeout') // 宏任务队列，微任务全部结束最后输出 【第九个输出】
},0)

new Promise(resolve => {
    console.log('promise'); // 【第二个输出】
    resolve(); // then 放入微任务 1
}).then(() => {
    console.log('promise1') // 【第五个输出】
}).then(() => {
    console.log('promise2') // 又遇到一个then 加入微任务 4 【第八个输出】
})

Promise.resolve().then(() => { // 又一个then 放入微任务 2
    console.log('promise resolve'); // 【第六个输出】
})

async1();

console.log('script end'); // 【第四个输出】，之后开始执行微任务队列

tip

在做事件循环问题的时候，在纸上画一画，画出主调用栈、微任务队列、宏任务队列，帮助理清思路