简单了解JS事件循环（Event Loop）

本文章参考阮一峰大佬对 Event Loop 详解

一、什么是事件循环（EVENT LOOP）

Event Loop 是一个很重要的概念，指的是计算机系统的一种运行机制。

任务队列( Event Queue )

任务可以分为同步任务和异步任务，同步任务，顾名思义，就是立即执行的任务，同步任务一般会直接进入到主线程中执行；而异步任务，就是异步执行的任务，比如ajax网络请求，setTimeout 定时函数等都属于异步任务，异步任务会通过任务队列的机制(先进先出的机制)来进行协调。具体的可以用下面的图来大致说明一下：

同步和异步任务分别进入不同的执行环境，同步的进入主线程，即主执行栈，异步的进入任务队列。主线程内的任务执行完毕为空，会去任务队列读取对应的任务，推入主线程执行。 上述过程的不断重复就是我们说的 Event Loop (事件循环)。

二、Event Loop 的事件循环机制：

JavaScript的事件分两种，宏任务(macro-task)和微任务(micro-task)

• 宏任务：包括整体代码script，setTimeout，setInterval

• 微任务：Promise.then(非new Promise)

• 事件的执行顺序，**是先执行宏任务，然后执行微任务**，这个是基础，任务可以有同步任务和异步任务，同步的进入主线程，异步的进入Event Table并注册函数，异步事件完成后，会将回调函数放入Event Queue中(**宏任务和微任务是不同的Event Queue**)，同步任务执行完成后，会从Event Queue中读取事件放入主线程执行，回调函数中可能还会包含不同的任务，因此会循环执行上述操作。

• **简单理解：首先执行 宏任务 => 微任务的Event Queue => 宏任务的Event Queue
  **

举个例子说明：

根据图片显示我们来整理一下流程：

1.执行console.log('script start')，输出script start；

2.执行setTimeout，是一个异步动作，放入宏任务异步队列中；

3.执行async1()，输出async1 start，继续向下执行；

4.执行async2()，输出async2，并返回了一个promise对象，await让出了线程，把返回的promise加入了微任务异步队列，所以async1()下面的代码也要等待上面完成后继续执行;

5.执行 new Promise，输出promise1，然后将resolve放入微任务异步队列；

6.执行console.log('script end')，输出script end；

7.到此同步的代码就都执行完成了，然后去微任务异步队列里去获取任务

8.接下来执行resolve（async2返回的promise返回的），输出了async1 end。

9.然后执行resolve（new Promise的），输出了promise2。

10.最后执行setTimeout，输出了settimeout。

对于promise知识以及练习题请参考：

juejin.cn/post/687074…

最后的最后，记住，JavaScript 是一门单线程语言，异步操作都是放到事件循环队列里面，等待主执行栈来执行的，并没有专门的异步执行线程。