宏任务与微任务的执行顺序

可口可乐了吗

已于 2022-03-06 16:42:40 修改

阅读量1.6k

点赞数

分类专栏： JavaScript 文章标签： javascript 数组 vue.js

于 2022-03-06 16:24:05 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_51042892/article/details/123312296

版权

JavaScript 专栏收录该内容

14 篇文章

订阅专栏

本文探讨了JavaScript中的同步任务、微任务和宏任务的执行顺序。通过实例解释了Promise构造函数作为同步任务先执行，随后是微任务如resolve后的回调，最后执行宏任务如setTimeout。在宏任务中，先执行setTimeout，然后处理相应的微任务，例如.then回调。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

同步任务>微任务>宏任务

举例：

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

        new Promise(resolve=>{
            resolve();
            console.log("day day up");
        }).then(value=>console.log("good good study"));
        console.log('zyzyzy');

执行结果：
day day up
zyzyzy
good good study
settimeout
Promise的构造函数是同步任务，所以先执行其中的day day up
然后执行下一个同步任务zyzyzy
然后执行微任务good good study，因为Promise发出resolve成功提示，所以执行成功后的任务，即输出good good study
最后执行宏任务 settimeout

举例：

		let promise= new Promise(resolve => {
            setTimeout(() => {
                resolve();
                console.log('settimeout');
            }, 0);
            console.log("resolve");
        }).then(value => console.log("then"));
        console.log('zyzyzy');

执行结果：
resolve
zyzyzy
settimeout
then
settimeout是宏任务所以先放到事件队列中
接着执行resolve和zyzyzy
此时应执行微任务，但是由于settimeout这个宏任务还未执行，故其中的resolve（）还未被执行到，所以then的微任务还未被创建，所以微任务队列里还没有then这个微任务，所以没法执行then，所以先执行settimeout
最后执行then