为什么要搞懂 JavaScript 的事件循环机制

为什么要搞懂 JavaScript 的事件循环机制

起初学习事件循环只是单纯的去理解，不知道也没有去思考为什么都在讲这个，只知道在解释异步任务执行顺序时会用它作为依据。

经过一段时间的沉淀，个人对理解事件循环机制的意义开始做一些总结，在这里记录一下。

1. 理解 JavaScript 单线程特性如何运行程序
2. 理解 JavaScript 任务的执行顺序

理解 JavaScript 单线程特性如何运行程序

首先要区分异步和并发：

• 异步是关于现在和将来的时间间隙，异步任务是相对于当前任务经过一些时间后执行的任务。
• 并行是关于能够同时发生的事情，并行的任务可以同时执行。

并行计算最常见与多线程，每个线程独立运行，并能同时运行，例如 webpack配置多线程打包优化可以加快打包速度。

而JS是单线程的，它依靠事件循环机制把程序分成一个个任务（事件）并顺序执行。

思考下面的代码：

var a = 1, b = 0

function foo () {
  a = a + 1
  b = a
}

function bar () {
  a = a * 2
  b = a
}

ajax('http://xxx.com/doSomethingA', function() {
  foo()
})

ajax('http://xxx.com/doSomethingA', function() {
  bar()
})

我们都知道运行后 b 的结果（假设ajax请求都可以正常响应）只能有两种（4 或 3），取决于foo、bar两个函数的执行顺序。

ajax 异步创建了两个任务：JS 运行环境监听服务器响应事件后，调用指定的回调函数。

事件循环机制保证了，这两个任务都不会在第一个任务执行完成前去运行。

而如果是多线程并发机制去运行，两个任务并发执行，foo 函数在运行时 bar 也开始运行，它们内部都访问并修改了a变量，它们的语句执行顺序将互相穿插，从而得出更多可能的结果。

例如当 foo函数中的 a = a + 1 执行完成后，去执行了 bar 函数中的 a = a * 2，此时 foo 和 bar 执行完成后的 b 的值都是 4。

这种多线程情况下的语句顺序级别的不确定性，远远高于单线程的函数（事件）顺序级别的不确定性。

这就是事件循环机制在 JavaScript 中发挥的作用。

JavaScript 在单线程中，通过事件循环机制调度事件（函数）的方式来确保程序运行的确定性。

理解 JavaScript 任务的执行顺序

这点就是常见的关于主线程任务、微任务、宏任务的执行顺序。

相关文章太多了，这里就不多讲了。