简单理解js中的Event Loop

我找工作的第一天和丁总准备面试别人的第一天，在这一天相遇了

于是我们共同的理解了如下这个小小的知识点

本文主要讲浏览器的实现，因为暂时不接触node。

---

众所周知，js天生就是单线程的，所以它有一个任务执行的顺序。event loop就是完成这一任务的执行模型。

js有两种任务形式，一种是同步任务，一种是异步任务。所有的同步任务都在主线程的一个执行栈上执行，异步任务会分成两个列队：

宏队列，macrotask也叫tasks。包括setTimeout和setInterval两个定时器

微队列，microtask也叫jobs。包括Promise、MutationObserver

说到Promise，要说明一点，Promise内部是同步的，但是它的回调是异步的属于微列队。

这里拿一段代码演示，控制台打印的的1～8是什么顺序打印呢？

console.log(1); 
setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});
new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((res) => {
  console.log(res);
})
setTimeout(() => {
  console.log(6);
  Promise.resolve().then(() => {
    console.log(7)
  })
},2000)
console.log(8);

放到浏览器中会看到上面代码的执行顺序是1、4、8、5、2、3、6、7

如图所示（按照理解自行画了一个奇丑无比的流程图）：

上图中可以看出每一个宏列队是按照注册时间顺序执行的，执行洪任务时会现执行同步任务，再执行微列队里的内容。

那么这时候就会有个别的杠精（这里特指我丁总）会写出如下代码：

setTimeout(function () {
   console.log(1)
},3000);
setTimeout(function () {
   console.log(2)
   setTimeout(()=>{
     console.log(3)
   },2000)
}, 1000);

当然理解了知识点的我是不会被这点小问题难住的。结果是2、1、3

通过摸索到宏列队会按时间执行的特性，浏览器会优先注册第二个st并打印2，到第三秒的时候，会按照代码的执行顺序注册第一个st并打印1，最后注册第二个st包裹的st并打印3。

是不是有点理解了呢～