js 彻底搞懂事件循环机制 Event Loop

我们都知道JavaScript是单线程语言,就是因为单线程的特性，就不得不提js中的同步和异步

一、同步和异步

所谓单线程，无非就是同步队列和异步队列，js代码是自上向下执行的，在主线程中立即执行的就是同步任务，比如简单的逻辑操作及函数，而异步任务不会立马立马执行，会挪步放到到异步队列中，比如ajax、promise、事件、计时器等等。

也就是先执行同步，主线程结束后再按照异步的顺序再次执行。

二、时间循环（Event Loop）

Event Loop是什么？中文翻译是事件循环，等待主线程中任务全部完成后，再回来把异步队列中任务放到主程序中运行，这样反复的循环，就是事件循环。

先来看组代码

console.log('开始111');
setTimeout(function() {
   console.log('setTimeout111');
}, 0);
Promise.resolve().then(function() {
   console.log('promise111');
}).then(function() {
   console.log('promise222');
});
console.log('开始222');

我们猜想一下上面的代码，会怎样打印？我们知道，肯定是先走同步的代码，从上往下，先打印 “开始111”，再打印“开始222”。
中途的三个异步，进入到了异步队列，等待同步执行完（打印完），返回来再执行异步，所以是后打印出来。
打印的结果先放一放，我们稍后回来再说。现在我们中途插播一段知识点：

三、宏观任务和微观任务（先执行微观任务，再执行宏观任务）：

在事件循环中，每进行一次循环操作称为tick，tick 的任务处理模型是比较复杂的，里边有两个词：分别是 Macro Task （宏任务）和 Micro Task（微任务）。

简单来说：

宏观任务主要包含：setTimeout、setInterval、script(整体代码)、I/O、UI 交互事件、setImmediate(Node.js 环境)

微观任务主要包括：Promise、MutaionObserver、process.nextTick(Node.js 环境)

规范：先执行微观任务，再执行宏观任务

那么我们知道了，Promise 属于微观任务， setTimeout、setInterval 属于宏观任务，先执行微观任务，等微观任务执行完，再执行宏观任务。所以我们再看一下这个代码：

console.log('开始111');

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

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

console.log('开始222');

console.log('开始111');

setTimeout(function () {
   console.log('timeout111');
});

new Promise(resolve => {
   console.log('promise111'); 
   resolve();
   setTimeout(() => console.log('timeout222'));
}).then(function () {
   console.log('promise222')
})

console.log('开始222');

链接: http://www.fly63.com/article/detial/9574