阅读 163

JavaScript事件循环机制EventLoop

前言

今天与同事切磋高级开发技能,同事问到了事件循环机制Event Loop。一时没有回答上来,回家后整理了一下。以此谨记。

概念

Event Loop即事件循环,是指浏览器或Node的一种解决javaScript单线程运行时不会阻塞的一种机制,也就是我们经常使用异步的原理。 在JavaScript中,任务被分为两种,一种宏任务(MacroTask)也叫Task,一种叫微任务(MicroTask)。

宏任务

宏任务包括 script (整体代码)setTimeoutsetIntervalsetlmmediatel/O UI rendering

微任务

微任务包括 promiseQbject observeMutation Observer 微任务是跟屁虫,一直跟着当前宏任务后面代码执行到一个微任务就跟上,一个接着一个 B01.png

实例展示

我们来看以下代码

console.log('script start' );
 // 宏任务
setTimeout( function () {
  console.log('setTimeout' );
}, 0);
  // 微任务跟在当前宏在务屁股后面
Promise. resolve().then(function () {
  //微任务跟在当前宏任务配服石面
  console.log('promise1');
}).then(function () {
  // 微任务跟在当前宏任务屈股后面
  console.log('promise2');
});
console.log('script end');
复制代码

在以上代码中第一次洪任务为script (整体代码),所以优先输出script startscript end 在本次宏任务中有两个.then微任务,所以其次输出promise1promise2 在第二次事件循环中我们遇到了宏任务setTimeout 所以再输出setTimeout 所以最终输出为

B101.png

以下我画了张图方便大家更好理解

B02.png

小练习

以下给大家带来了两个小练习,大家可以手动敲下,深刻的理解其中的原理

题目1

B03.png

输出为 3 4 8 5 2

题目2

B04.png

输出为

B05.png

文章分类
前端
文章标签