事件循环中宏任务微任务

鞠知延

已于 2022-12-02 14:31:29 修改

阅读量510

点赞数

分类专栏： js 浏览器文章标签： javascript 前端 vue.js

于 2022-09-28 18:14:07 首次发布

本文链接：https://blog.youkuaiyun.com/weixin_49517769/article/details/127094368

版权

本文深入探讨JavaScript的事件循环机制，详细解释了主线程如何执行宏任务和微任务，以及宏任务内部如何包含微任务的执行顺序。主线程先执行，接着处理主线程上的微任务，然后执行宏任务队列中的任务，每个宏任务执行完毕后，会检查并执行该宏任务中产生的微任务。

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

1. 主线程呦宏任务和微任务

console.log('---start---');//第一轮主线程
 
setTimeout(() => {
  console.log('setTimeout');  // 将回调代码放入个宏任务队列，第二轮宏任务执行
}, 0);
 
new Promise((resolve, reject) => {
  console.log('---Promise第一轮微任务同步执行---');//第一轮微任务同步执行
  resolve()
}).then(()=>{
  console.log('Promise.then实例成功回调执行'); // 将回调代码放入微任务队列，第一轮宏任务执行完后立即执行
});
 
console.log('---end---');//第一轮主线程结束

在这里插入图片描述

执行顺序：主线程 >> 主线程上创建的微任务 >> 主线程上创建的宏任务

2.宏任务中包含微任务和宏任务

// 宏任务队列 1
setTimeout(() => {
  // 宏任务队列 2.1
  console.log('timer_1');
  setTimeout(() => {
    // 宏任务队列 3
    console.log('timer_3')
  }, 0)
  new Promise(resolve => {
    resolve()
    console.log(&