一篇讲透前端宏任务与微任务 @莫成尘

╰+哭是因爲堅強的太久メ 2022-09-11 08:12 76阅读 0赞

## 本文章将浅谈浏览器宏任务与微任务执行机制 请看完 ##

### 我有理由相信，在面试过程中你遇到的如下问题：（他们是怎么执行并输出的） ###

setTimeout(()=>{ 
    		console.log(1)
    	})
    	console.log(2)
    	let a = new Promise((resolve,reject)=>{ 
    		console.log(3)
    		resolve(4)
    	}).then(res=>{ 
    		console.log(res)
    	}).catch(err=>{ 
    		console.log(err)
    	})
    	console.log(5)

#### 我们先来简单总结概念：在js执行中，代码从第一行开始被解释的时候（事件循环）便会进行任务队列的执行机制，此时会出现宏任务队列每个宏任务下有若干个微任务，称为微任务队列 当第一个宏任务执行完成之后才会执行下一个宏任务 每一个宏任务中的微任务依次执行 ####

![莫成尘][watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6I6r5oiQ5bCY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]

##### 让我们看看：对于前端来说宏任务与微任务分别有什么？(知道这四个就行) #####

<table> 
 <thead> 
  <tr> 
   <th align="center">宏任务</th> 
   <th align="center">微任务</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="center">setTimeOut</td> 
   <td align="center">nextTick</td> 
  </tr> 
  <tr> 
   <td align="center">setInterval</td> 
   <td align="center">Promise，console</td> 
  </tr> 
 </tbody> 
</table>

### 我们就用上面这个题做分析（ 重点来了： Promise 被声明的瞬间就会执行，同时他有：等待（pending）、已完成（fulfilled）、已拒绝（rejected）三种状态 。）来分析一下为什么输出 2 3 5 4 1 ###

setTimeout(()=>{ 
    		console.log(1) //宏任务中 最后执行 
    	})
    	console.log(2)   //自上而下 第一个输出： 我们得到2
    	let a = new Promise((resolve,reject)=>{  
    		console.log(3) //第二个输出 Promise被执行 此时的状态是pending 
    		// 遇到第一个异步停止 （.then）
    		resolve(4)
    	}).then(res=>{   //第四个执行 由于我们是resolve 所以输出 4 如果是 rejected将会进入到.catch中去执行
    		console.log(res)
    	}).catch(err=>{ 
    		console.log(err)
    	})
    	console.log(5) //第三个输出 5 你或许会疑惑怎么执行到这里了 事实上Promise还存在，状态是pending 
    	// 输出 2 3 5 4 1

1.  我们知道了 setTimeout 是一个宏任务 所以他必将等待上一个宏任务执行完成，因此 它是最后输出的 （即使放在Promise中也是）
2.  然后执行到了 console.log(2) 这一行 输出 2
3.  此时执行Promise运行的结果 虽然Promise的状态没有改变 但是被第一个异步函数.then打断了执行 所以浏览器解析下一个
4.  到了最后一行输出5
5.  下一个宏任务setTimeout 执行 输出 1
6.  至此：我们得到了 2 3 5 4 1

#### 注意： Promise.resolve().then(function () \{console.log(‘two1’);\}); 和 new Promise之后的then是同一级，从上到下执行 ，执行顺序在 console.log之后（他需要等待状态的改变）假如我们是这样的代码 那么他的输出在 ‘a.then’之前 ####

setTimeout(()=>{ 
    		console.log(1) //宏任务中 最后执行 
    	})
    	console.log(2)   //自上而下 第一个输出： 我们得到2
    	Promise.resolve().then(function () {  // 解析Promise 
    	  console.log('Promise');
    	});
    	let a = new Promise((resolve,reject)=>{  
    		console.log(3) //第二个输出 Promise被执行 此时的状态是pending 
    		// 遇到第一个异步停止 （.then）
    		resolve(4)
    	}).then(res=>{   //第四个执行 由于我们是resolve 所以输出 4 如果是 rejected将会进入到.catch中去执行
    		console.log(res)
    	}).catch(err=>{ 
    		console.log(err)
    	})
    	console.log(5) //第三个输出 5 你或许会疑惑怎么执行到这里了 事实上Promise还存在，状态是pending 
    	// 输出 2 3 5 Promise 4 1

其他有关此方面的疑问或者此方法不理解的地方您可留言，我会尽快回复并帮您解决。本文章浅谈相关的宏任务，微任务和Promise ，希望帮助您轻松应对面试，如需要更深研究，请参考相关文章

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA6I6r5oiQ5bCY_size_20_color_FFFFFF_t_70_g_se_x_16_pic_center]: /images/20220828/898b7a8fc9524985b84b06a29f8f8c64.png