Promise微任务

时间:2021-08-23
本文章向大家介绍Promise微任务,主要包括Promise微任务使用实例、应用技巧、基本知识点总结和需要注意事项,具有一定的参考价值,需要的朋友可以参考一下。

1.起因

在看了“浏览器工作原理与实践=》浏览器中的页面循环系统=》宏任务和微任务”的章节后,我了解了微任务的执行时机:当前函数执行完成之前会依次执行当前函数上下文中的微任务队列。那么在一个函数中new Promise执行顺序是什么呢?如下:

function test(resolve, reject){
    console.log(3);
    resolve(4);
}

function main(){
    console.log(1)
    const a = new Promise(test)
    a.then(val=>{
        console.log(val)
    })
    console.log(2)
}
main()

2.Promise产生微任务的时机

上文的代码执行完后顺序为:

1
3
2
4

这个情况跟我理解的微任务相违背“当前函数执行完成之前会依次执行当前函数上下文中的微任务队列”,Promise作为微任务执行之后至少1紧接着是2,但我却忽略了微任务产生的时机:使用 Promise,当调用 Promise.resolve() 或者 Promise.reject() 的时候,会产生微任务。
所以上述代码执行回调test函数时,并不会产生微任务,而是正常顺序执行的。

3.验证微任务比宏任务优先执行

function test(resolve, reject){
    console.log(3);
    resolve(4);
}

function main(){
    console.log(1)

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

    let j =0
    for (let i = 0; i < 1000000000; i++) {
            j++
    }

    const a = new Promise(test)
    a.then(val=>{
        console.log(val)
    })

    console.log(2)
}

main()

PS:这里的验证不严谨,但大概也能描述出宏任务和微任务执行的顺序,执行结果如下:

1
3
2
4
5

原文地址:https://www.cnblogs.com/-Neo/p/15175466.html