JS事件循环例题

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

console.log('start1')

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

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

setTimeout(() => {
    Promise.resolve().then(() => {
        console.log('promiseA')
    }).then(() => {
        console.log('promiseB')
    })
})

Promise.resolve().then(() => {
    console.log('promise88')
    setTimeout(() => {
        console.log(333)
    })
}).then(() => {
    console.log('promise2')
    setTimeout(() => {
        console.log(555)
    })
})

console.log('start2')

解析：

• 首先javascrip全局上下文入栈，遇到new Promise()同步任务执行打印promise1 resolve()后 .then异步函数被推入微任务队列
• 遇到console.log('start1')同步立即执行打印start1
• 遇到setTimeout 异步任务2s后把要执行的任务推入宏任务队列中
• 遇到setTimeout 异步任务1s后把要执行的任务推入宏任务队列中
• 遇到setTimeout 异步任务立即把要执行的任务推入宏任务队列中
• 遇到Promise执行resolve后将第一个then方法推入微任务队列中
• 遇到console.log('start2')执行打印start2
• 此时打印了 promise1、start1、start2
• 执行完当前主线程后依次执行当前微任务队列、直至清空、队列的结构是先进先出、所以依次如下
• 执行第一个微任务打印promise2
• 执行第二个微任务打印promise88。紧接着遇到setTimeout 异步任务立即把要执行的任务推入宏任务队列中、将后面的then推入微任务队列中
• 执行第三个微任务打印promise2。紧接着遇到setTimeout 异步任务立即把要执行的任务推入宏任务队列中
• 检查当前微任务队列是否为空、为空将宏任务队列中的下一个入栈执行
• 遇到promsie.resolve()执行将then方法推入微任务队列
• 清空当前微任务队列打印promiseA 将后面的then又推入微任务队列
• 清空当前微任务队列打印promiseB
• 判断当前微任务队列是否为空、为空将下一个宏任务入栈并执行
• 打印333
• 打印555
• 打印a
• 打印b
• 全局上下文出栈，代码执行完毕。

最终结果为:

• promise1
• start1
• start2
• promise2
• promise88
• promise2
• promiseA
• promiseB
• 333
• 555
• b
• a