EventLoop 浅析看完不保证你一定会，但至少有个概念！

前言

最近在看面试题遇到一个 event loop的问题，之前听朋友讲过，一直没有去深入的了解过。

查了一些资料之后发现这是个了不起的东西！

event loop 是什么？？

先Look 一张picture，看没看懂没关系。先听我慢慢道来。。

heap（堆）：对象被分配在堆中，堆是一个用来表示一大块（通常是非结构化的）内存区域的计算机术语。

stack（栈）：函数调用形成了一个由若干帧组成的栈。

WebAPIS：囊括 Web 强大脚本能力的每个 API 参考资料， 包括 DOM 、所有相关的 APIs 及可以用来构建 Web 的相关接口。

队列（callback queue）：在 事件循环 期间的某个时刻，运行时会从最先进入队列的消息开始处理队列中的消息。被处理的消息会被移出队列，并作为输入参数来调用与之关联的函数。

--来源MDN

是不是还是不太懂？？？

没事我们先看代码，这段代码有异步有同步。

setTimeout(() => {
    console.log(1)
}, 100)
console.log(2);
setTimeout(() => {
    console.log(3)
}, 0)
// 2
// 3
// 1

演示代码。这个演示环境有点bug，朋友们可以写点其他的代码试试，加深理解

看图我们可以了解到，setTimeout(() => {console.log(1)}, 0) 会在Stack执行，在放入WebAPIs中当成一个匿名函数执行，匿名函数执行完毕之后会放入Callback Queue 中。 console.log(2) 则直接被推入Stack 中执行。

setTimeout(() => {console.log(3)}, 0) 同样的执行后放入WebAPIs中当成一个匿名函数执行，在放入Callback Queue中。当同步任务执行完之后，才会将Callback Queue 队列中的方法推入Stack中。

这是为啥呢？

因为JS是单线程的，单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务。为了解决排除等待问题，JS的任务分为同步任务（synchronous）和异步任务（asynchronous）。 所有同步任务都在主线程上执行，形成一个Stac）。异步任务（如果是WebAPI 则会进入WebAPI，例如ajax setTimeout）不进入主线程，而是进入另一 Callback Queue。同步任务顺序执行，只有执行栈中的同步任务执行完了，系统才回读取任务队列中可以执行的异步任务，才会把此异步任务从事件队列中放入执行栈中执行，如此循环，直至所有任务执行完毕。

--来源

这就是Event Loop。

但是但是，异步任务又分微任务和宏任务！

微任务和宏任务是什么呢？

结尾

下一篇文章给大家带来 微任务和宏任务得讲解。

快来加群催更吧……