js的事件执行机制之Event Loop(事件循环)

首先了解一下以下几个概念：

JavaScript语言的特点：
JavaScript语言的一大特点就是单线程，也就是说，同一个时间只能做一件事。单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。如果前一个任务耗时很长，后一个任务就不得不一直等着，于是引入异步任务的概念。

同步任务和异步任务：
所有任务可以分成两种，一种是同步任务（synchronous），另一种是异步任务（asynchronous）。同步任务指的是，在主线程上排队执行的任务，只有前一个任务执行完毕，才能执行后一个任务；异步任务指的是，不立即进入主线程、而先进入"任务队列"（task queue）的任务，只有"任务队列"通知主线程，某个异步任务可以执行了，该任务才会进入主线程执行。

任务队列：
"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。任务队列又分为宏队列和微队列，分别存放宏任务和微任务。

宏任务和微任务：
在JavaScript中，任务被分为两种，一种宏任务（MacroTask），一种叫微任务（MicroTask）。
常见的宏任务：
script全部代码、setTimeout、setInterval
常见的微任务：
Promise中then的回调函数、MutationObserver、Process.nextTick（Node独有）

事件循环：

（1）js代码执行时，先按代码顺序将同步任务压入主执行栈中执行
（2）遇到异步任务则先将异步任务压入对应的任务队列中（宏队列或微队列）
（3）同步任务执行完毕后，查看微队列，将微任务一一取出进入主执行栈中执行
（4）微任务队列清空后，再查看宏队列，只取出第一个宏任务执行，执行完一个宏任务后，回到第三步的操作
这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。
（按照这个思路做题基本没什么问题，需要注意的点就是then中的回调函数要确定Promise状态后才能压入微队列）

（懒得自己去画图，引用知乎大佬的一张图，虽然和我总结的不是很相符）
顺带一提：
js的异步原理：借用浏览器的线程及Web APIs来实现

做个题目巩固一下：

console.log(1);

setTimeout(() => {
  console.log(2);
  Promise.resolve().then(() => {
    console.log(3)
  });
});

new Promise((resolve, reject) => {
  console.log(4)
  resolve(5)
}).then((data) => {
  console.log(data);
})

setTimeout(() => {
  console.log(6);
})

console.log(7);
// 正确答案
1
4
7
5
2
3
6

参考文章：
阮一峰大神写的Event Loop
知乎大佬写的Event loop