js 异步执行顺序

转载已于 2022-06-28 16:03:24 修改 · 2k 阅读

4 ·

本内容遵循CC 4.0 BY-SA版权协议

原文链接：https://blog.csdn.net/zemprogram/article/details/103328340

标签

#javascript #前端 #开发语言

于 2022-06-01 15:33:48 首次发布

本文详细介绍了JavaScript中的同步与异步执行顺序，重点解析了微任务和宏任务的概念及其执行流程。在执行栈同步任务完成后，会先执行微任务队列，再执行宏任务队列。微任务包括Promise、process.nextTick和MutationObserver，宏任务包括setTimeout等。示例代码展示了任务执行的顺序，最终输出为1,7,4,0,3,5,2,8,6。

js的执行顺序，先同步后异步
异步中任务队列的执行顺序：先微任务microtask队列，再宏任务macrotask队列
调用Promise 中的resolve，reject属于微任务队列，setTimeout属于宏任务队列
注意以上都是队列，先进先出。

微任务和宏任务
实际上，异步任务也被分为微任务和宏任务，这两种任务在最直观的区别在于优先级
如上文所说，当我们在执行栈中将同步任务执行完了之后，我们会去查看任务队列中的任务，首先查看的是微任务，如果有微任务，将其拿到执行栈中执行，如果没有，则去查看宏任务，做一样的操作
从上面的流程看出，微任务的优先级是大于宏任务的

而从这两个任务的命令角度，可以有另一种也是比较准确的理解，我们可以将任务队列中存在的任务也看出宏任务，而宏与微，实际上就是大和小的区别，微任务的存在，是为了能够在两个花费时间长的宏任务之间，去处理一些微小的任务，所以，实际上我们是在处理完任务队列中的任务后，在执行下一个宏任务之前，查看当前是否有微任务，如果有，就利用这个间隙去执行微任务，等到微任务都执行完了，再去执行下一个宏任务

因此，即使同时有多个宏任务被加入队列中，在这些宏任务之间切换时，也要去看微任务队列中是否有微任务，如果有的话就要先执行这些微任务

微任务包括 process.nextTick ，promise ，MutationObserver。
宏任务包括 script ， setTimeout ，setInterval ，setImmediate ，I/O ，UI rendering。

(function() {

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

   new Promise(resolve => {
       console.log(1);

       setTimeout(() => {
           resolve();
           Promise.resolve().then(() => console.log(2));
           console.log(3);
       });

       Promise.resolve().then(() => console.log(4));

   }).then(() => {
       console.log(5);
       Promise.resolve().then(() => console.log(8)); //这句是多加的
       setTimeout(() => console.log(6));
   });

   console.log(7);

})();

答案如下：
1,7,4,0,3,5,2,8,6
————————————————
参考：https://www.jianshu.com/p/dca909dce191 详解JavaScript异步执行顺序_前端小黑的博客-CSDN博客