谈一谈我眼中的宏任务与微任务

前言

最近在准备面试，自然也是看了一下浏览器和node.js的宏任务与微任务。我已经把最简单的想通了，我认为这个理解非常容易帮助理解，分享给大家。

实验代码

1. 实验代码1

   

2. 实验代码2

   

简单介绍

我讲解最简单的情况，后面再补充node.js等等的复杂内容。

划重点：宏任务和微任务分别是两个队列，每当一个宏任务执行完成后会将所有微任务出列并执行。

什么是宏任务

1. 主线程
2. setTimeout里面的函数
3. setInterval里面的函数

什么是微任务

1. promise的then，catch里面的函数

注意⚠️

1：new Promise不是微任务，后面的then，catch才是。 2. promise的then和catch会返回一个新的promise（方便链式调用），并把当前的promise状态从pending转变到fulfilled或者rejected。

实验代码1解析

1. 首先我们先执行主线程的代码

   currMacro = '主线程'
   macroList = []
   microList = []
   

2. 遇到第一个定时器，把定时器1放到宏任务队列中，继续执行主线程

   currMacro = '主线程'
   macroList = ['定时器1']
   microList = []
   

3. 遇到new Promise，注意，这个不是微任务，是主线程中的普通语句，直接执行。然后把后面的then放进微任务。

   currMacro = '主线程'
   macroList = ['定时器1']
   microList = ['主线程中的promise的then']
   

4. 运行下面的两个定时器，将他们放到macroList中。

   currMacro = '主线程'
   macroList = ['定时器1','定时器2','定时器3']
   microList = ['主线程中的promise的then']
   

5. 执行到最后，主线程执行完了，我们需要执行所有的微任务了。

   currMacro = null
   macroList = ['定时器1','定时器2','定时器3']
   microList = []
   

6. 然后执行定时器1，把定时器1里面那个promise的then放进microList中

   currMacro = '定时器1'
   macroList = ['定时器2','定时器3']
   microList = ['定时器1中的promise的then']
   

7. 然后定时器1也执行完了，执行所有的微任务。

8. ······，下面的内容都差不多，我就不说了。

下面是实验1的结果👇：

实验代码2解析

先给答案：

大家按照宏任务队列和微任务队列自己想吧。注意很多个then那，执行了当前的微任务，又将后面的then或者catch加入了微任务的列表，所以要一直做完了所有的微任务才能去执行下面的微任务。