js宏任务与微任务案例1

103 阅读1分钟
function fn() {
    setTimeout(() => {
        console.log(1)
        console.log('settimeout')
        queueMicrotask(() => {
            console.log('queueMicrotask')
        })
        new Promise((resolve) => {
            console.log('new promise')
            resolve('resolve')
            setTimeout(() => {
                console.log('settime2')
                new Promise((resolve) => {
                    console.log('settime2 new promise')
                    resolve('settime2 resolve')
                }).then(res => console.log(res))
                console.log('settime2', 2222)
            }, 0)
        }).then(res => console.log(res))
        console.log(2)
    }, 0)
}

事件执行机制:js会将宏任务队列依次取出执行(一个一个的取出来执行), 1、这个案例会首先执行script代码(这是个宏任务),setTimeout这个宏任务会放到任务队列里等第一个宏任务执行完毕才会接着执行。
2、紧接着把该宏任务里的同步任务执行完毕,这个没问题。// '1' 'settimeout' 'new promise' '2'
3、之后会查看是否有微任务:queueMicrotask是一个,then是一个 // 'queueMicrotask' 'resolve' ''
4、之后会任务队列里面取出第二个宏任务,也就是案例里第二个setTimeout,重复以上步骤。
// 完整输出

image.png