简述JavaScript事件循环EventLoop

JavaScript事件循环，是js运行顺序最基本的机制，本文用简单通俗的语言讲解一下JavaScript事件循环是怎么运行的。但愿能对你们理js解事件循环有所帮助 

 

        本文只是帮助理解，用词不会很谨慎，若是在正式场合使用，请自行翻译成高大上的专业词汇。

        你们都知道JavaScript是单线程的，代码都在执行栈中执行。那么我写了那么老多代码，好多好多，一坨一坨的，哪都是。程序怎么选择执行着一坨坨一堆堆的代码谁先谁后呢。这就须要事件循环来机制来处理了

首先在这套机制里有这三个东东。执行栈、宏任务、微任务

执行栈，是用来执行咱们写的代码的，怎么执行本文阐述，只要知道它是执行代码用的就好了

宏任务，能够理解为存放等待执行栈中执行代码用的，它是个队列。先进先出

微任务，和宏任务同样也是存代码用的，等待被执行栈执行的，它也是个队列。先进先出

宏任务和微任务都是存代码的，为啥整俩呢？

为啥整俩，emmm。。。小明你出去

宏任务和微任务区别就是底层如何选择放入执行栈中执行，也就是放入执行栈的规则是不同的。

下面就说说规则是啥。这个规则其实就是JavaScript的时间循环机制（eventLoop）

首先什么会被放入宏任务，什么会被放入微任务呢。这个是已经规定好的。

宏任务包括：

主任务（例如一个script标签，在html中一个script标签就是一个宏任务）
setTimeout
setInterval
I/O
UI交互事件
postMessage
MessageChannel
setImmediate(Node.js 环境)复制代码

微任务包括：

Promise.then
Object.observe
MutaionObserver
process.nextTick(Node.js 环境)复制代码

知道了谁是宏任务谁是微任务，也就是有了原料了，怎么加工呢，

第二就是机制怎么运转

上图解释：

一个js程序（好比一个网页被打开）一开始是酱婶的，为何只有宏任务有东西。由于开始运行，咱们写的代码还没开始执行，底层只能看到咱们写的一坨坨代码，也就是主任务。因此一开始，底层会把全部静态主程序怼到宏任务里。等待执行

下面就开始执行了，继续上图

宏1被压入执行栈执行，在宏1执行中有可能产生宏任务和微任务，只要产生宏或微，就按照产生的顺序插入到相应的任务队列尾部。

接下来宏1执行完毕，宏1出栈

接下来，底层会检查微任务队列中有没有任务。若是有就会执行全部等待执行的微任务

在微任务运行过程当中也有可能产生微任务和宏任务。同样，只要产生宏或微，就按照产生的顺序插入相应的队尾。

微1执行完毕，出栈，接下来微2会入栈执行，而后是微3入栈执行

全部微任务执行完毕，这时才会从新从宏任务队列中选择下一个任务执行，直到全部任务执行完毕

最后来个动画