谈谈JavaScript的事件循环

我们都知道js是单线程的，单线程就意味着，在同一时间点js只能做一件事情。

所以所有的任务就需要排队，前一个任务完成之后才能继续下一个任务，若前面的任务消耗时间过长，后面的任务就会等待大量的时间。在等待过程中如果是因为cpu计算不过来就算来，关键是IO设备太慢了（比如ajax从后端读取数据等等）导致cpu也是空闲的，后面的任务又不得不等待前面的任务执行完毕。

js语言设计者意识到可以不等待IO设备执行完毕，主线程可以在IO设备等待期间去做其他的事情，等到IO操作执行完毕之后再回头来处理IO操作。

于是乎，所有的任务可以分为两种：同步和异步

同步：主线程上执行的任务，必须一个执行完之后才能执行下一个

异步：不进入主线程而进入“任务队列”的任务，只有任务队列中的任务通知主线程说某个异步操作完成了，它才可以进入主线程。

因此，JavaScript任务机制如下：

1、所有同步任务在主线程上执行，形成一个执行栈

2、主线程之外还存在一个任务队列，只要异步操作有了执行结果，就可以在任务队列中放置一个事件

3、一旦主线程中的所有事件执行完毕，js就会读取任务队列中的事件，把等待结果完毕的事件放置到执行栈中，开始执行

4、js不断重复上面三步

只要主线程空了，就会去读取"任务队列"，这就是JavaScript的运行机制。这个过程会不断重复。

事件和回掉：

"任务队列"是一个事件的队列（也可以理解成消息的队列），IO设备完成一项任务，就在"任务队列"中添加一个事件，表示相关的异步任务可以进入"执行栈"了。主线程读取"任务队列"，就是读取里面有哪些事件。

"任务队列"中的事件，除了IO设备的事件以外，还包括一些用户产生的事件（比如鼠标点击、页面滚动等等）。只要指定过回调函数，这些事件发生时就会进入"任务队列"，等待主线程读取。

所谓"回调函数"（callback），就是那些会被主线程挂起来的代码。异步任务必须指定回调函数，当主线程开始执行异步任务，就是执行对应的回调函数。

"任务队列"是一个先进先出的数据结构，排在前面的事件，优先被主线程读取。主线程的读取过程基本上是自动的，只要执行栈一清空，"任务队列"上第一位的事件就自动进入主线程。但是，由于存在后文提到的"定时器"功能，主线程首先要检查一下执行时间，某些事件只有到了规定的时间，才能返回主线程。

Event Loop

主线程从"任务队列"中读取事件，这个过程是循环不断的，所以整个的这种运行机制又称为Event Loop（事件循环）。

为了更好地理解Event Loop，请看下图（转引自Philip Roberts的演讲《Help, I'm stuck in an event-loop》）。

上图中，主线程运行的时候，产生堆（heap）和栈（stack），栈中的代码调用各种外部API，它们在"任务队列"中加入各种事件（click，load，done）。只要栈中的代码执行完毕，主线程就会去读取"任务队列"，依次执行那些事件所对应的回调函数。

执行栈中的代码（同步任务），总是在读取"任务队列"（异步任务）之前执行。