Js | Event Loop 宏任务&微任务

最新推荐文章于 2022-11-23 13:54:03 发布

Zero Ice

最新推荐文章于 2022-11-23 13:54:03 发布

阅读量443

点赞数 2

本文链接：https://blog.csdn.net/weixin_41593408/article/details/88560566

版权

[001]前端系列专栏收录该内容

63 篇文章 0 订阅

订阅专栏

js任务共分为两种：宏任务(macro-task)和微任务(micro-task)

宏任务：包括整体代码script，setTimeout，setInterval
微任务：Promise.then(非new Promise)，process.nextTick(node中)

事件的执行顺序，是先执行宏任务，然后执行微任务，这个是基础，任务可以有同步任务和异步任务。

同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(宏任务和微任务是不同的Event Queue)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。
在这里插入图片描述

setTimeout(() => {
    console.log('延时1秒');
},1000)
console.log("开始")

setTimeout函数是宏任务，且是异步任务，因此会将函数放入Event Table并注册函数，经过指定时间后，把要执行的任务加入到Event Queue中，等待同步任务console.log(“开始”)执行结束后，读取Event Queue中setTimeout的回调函数执行。

再看一个包含微任务的：

		setTimeout(function() {
            console.log('setTimeout');
        },1000)

        new Promise(function(resolve) {
            console.log('promise');
            resolve();
        }).then((data) => {
            console.log('resolved');
        },(err) => {
            console.log('rejected');
        }
        )
        console.log('console');

在这里插入图片描述

首先setTimeout，放入Event Table中，1秒后将回调函数放入宏任务的Event Queue中
new Promise同步代码，立即执行console.log(‘promise’),然后看到微任务then，因此将其放入微任务的Event Queue中接下来执行同步代码console.log(‘console’)
主线程的宏任务，已经执行完毕，接下来要执行微任务，因此会执行Promise.then，到此，第一轮事件循环执行完毕
第二轮事件循环开始，先执行宏任务，即setTimeout的回调函数，然后查找是否有微任务，没有，时间循环结束

整一个过程可以知道查看文章：《Tasks, microtasks, queues and schedules》

分析过程：

事件循环，先执行宏任务，其中同步任务立即执行，异步任务，加载到对应的的Event Queue中(setTimeout等加入宏任务的Event Queue，Promise.then加入微任务的Event Queue)，所有同步宏任务执行完毕后，如果发现微任务的Event Queue中有未执行的任务，会先执行其中的任务，这样算是完成了一次事件循环。接下来查看宏任务的Event Queue中是否有未执行的任务，有的话，就开始第二轮事件循环，依此类推。

下面来一个：

<div class="outer">
    <div class="inner">点击</div>
</div>

var outer = document.querySelector('.outer');
var inner = document.querySelector('.inner');

new MutationObserver(function() {
  console.log('mutate');
}).observe(outer, {
  attributes: true
});

function onClick() {
  console.log('click');

  setTimeout(function() {
    console.log('timeout');
  }, 0);

  Promise.resolve().then(function() {
    console.log('promise');
  });

  outer.setAttribute('data-random', Math.random());
}

inner.addEventListener('click', onClick);
outer.addEventListener('click', onClick);