JS事件循环机制图解

1、什么是事件循环：

众所周知JS是单线程、解释性语言（解析一行执行一行）。这就意味着假如遇到耗时任务，比如setTimeout，那么整个程序势必会阻塞等待setTimeout执行完毕再接着解释其他的语句。

但是很显然，这种机制显然与我们平时使用JS的完全不同，在我们的代码中，setTimeout并不会阻塞住我们程序的运行。

导致这种差异的原因是因为JS引入了事件循环的机制来处理这类耗时任务，也因此这类耗时任务被称之为异步任务（setTimeout , setInterval, promise , ajax）。很显然引入异步任务的机制极大的优化用户体验以及程序执行速度。这种执行流程称之为——事件循环

二、执行栈、微任务、宏任务

执行栈：即执行上下文，JS会把普通的程序语句放入执行栈进行解释运行

微任务队列：异步任务的一种，常见的有promise.then 。JS会把遇到的promise中的resolve的执行体放入微任务队列中

宏任务队列：异步任务的一种。JS会把遇到的setTimeout 、setInterval、Ajax放入宏任务队列中。

内存图：

三、执行流程

执行流程如图：

运行实例一：（不含任何异步任务）

由上图可得，执行结果2，1，3

运行实例二：（只含setTimeout）

1、执行fn2, fn2语句入执行栈。第一行代码为setTimeout，那么将setTimeOut代码快，放入宏任务队列中。

2、第二行为执行fn1 , 此时将fn1推入执行栈，执行console.log(1)，输出1，fn1结束运行，推出执行栈。此时：3、接着执行fn2最后的语句，console.log(3) , 输出 3 。此时

4、执行栈中已经没有可执行语句，此时将宏任务中的setTimeout语句接入执行栈中执行，输出2。弹出fn2

运行实例三：

输出顺序为 4，1 ，3 ，5，2

如果有认真看上面的流程的话，那么这个应该很简单，这里就不复述了。