阅读 516

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

前言

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

实验代码

  1. 实验代码1

    image.png

  2. 实验代码2

    image.png

简单介绍

我讲解最简单的情况,后面再补充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的结果👇:

实验1结果

实验代码2解析

先给答案:

image.png

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

文章分类
前端
文章标签