前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >多层嵌套 promise then 执行顺序

多层嵌套 promise then 执行顺序

作者头像
蓓蕾心晴
发布2022-10-30 14:01:58
1.1K0
发布2022-10-30 14:01:58
举报
文章被收录于专栏:前端小叙前端小叙

在看 js 事件循环的时候,看到一个有趣的 promise then 执行顺序的题,想了好久,终于想明白了,这里记录一下。

大家先想下这里的执行顺序是什么。

代码语言:javascript
复制
new Promise(resolve => {                  // 1
  setTimeout(()=>{                        // 2
      console.log(666);                   // 3
      new Promise(resolve => {            // 4
        resolve();                        // 5      
      })                                  // 6       
      .then(() => {console.log(777);})    // 7
  })                                      // 8       
  resolve();                              // 9
 })                                       // 10
 .then(() => {                            // 11
         new Promise(resolve => {         // 12
           resolve();                     // 13
         })                               // 14
         .then(() => {console.log(111);}) // 15
         .then(() => {console.log(222);});// 16
 })                                       // 17
 .then(() => {                            // 18
         new Promise((resolve) => {       // 19
           resolve()                      // 20
         })                               // 21
        .then(() => {                     // 22
             new Promise((resolve) => {   // 23
               resolve()                  // 24
             })                           // 25
            .then(() => {console.log(444)})// 26
         })                                // 27
        .then(() => {                      // 28
           console.log(555);               // 29
        })                                 // 30
})                                         // 31
.then(() => {                              // 32
  console.log(333);                        // 33
})                                         // 34

===================

1,2,3,4,5,6,7

这里最疑惑的我想应该就是 333 为什么先比 444 和 555 执行了,这里首先要明确一点  promise then函数回调执行完毕后才会开始下一个 then 函数,当多个 then 链式调用的时候,如果一个 then 函数放入微任务队列,没有执行完,则之后的 then 都会先忽略,继续向下寻找同步任务继续执行。

首先,大家都知道 setTimeout 是宏任务,则一定在下一轮事件循环的时候才执行,则他的执行优先级最低,promise是同步任务,会先执行,promise.then() 是微任务,当遇到微任务的时候,会先放入微任务队列,继续向下寻找同步任务,同步任务执行完之后,开始执行微任务。

执行到 22 行逻辑:

这里当执行到 22 行时, then的参数整体作为一个函数放入微任务队列中,因为这里还没执行,所以 555 的 then 就暂时不执行,继续下一个 333 的 then 放入微任务队列,接下来没有同步任务了,开始执行微任务队列,当执行到 23 行的时候,这个微任务先执行 promise 同步函数,将then 444 又放入了 微任务队列,接下来没有课执行的同步任务了,则开始执行微任务队列 444 打印输出,至此, 22-27 行终于执行结束了,开始进入 下一个 then 微任务,并放入微任务队列,打印 555。

22-34 行执行结束:

进入下一个宏任务,执行第 3 行,同步任务,打印 666,执行 4-5 行,同步任务,进入 then,执行 7 行,微任务。

转载请注明来源:https://cloud.tencent.com/developer/article/2144619

参考文章:https://347830076.github.io/myBlog/javascript/%E6%90%9E%E6%B8%85%E4%BA%8B%E4%BB%B6%E5%BE%AA%E7%8E%AF%E5%AE%8F%E4%BB%BB%E5%8A%A1%E5%BE%AE%E4%BB%BB%E5%8A%A1.html#%E6%89%A9%E5%B1%95%E5%BB%B6%E4%BC%B8

本文参与 腾讯云自媒体分享计划,分享自作者个人站点/博客。
原始发表:2022-10-18,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体分享计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档