什么是 JavaScript 中的事件循环？

JavaScript 是一种单线程语言，同时也拥有着异步编程的能力。在这种情况下，浏览器需要一种事件循环的机制来处理不同的任务。事件循环是 JavaScript 中处理异步任务的核心机制之一。

什么是事件循环？

事件循环（Event Loop）是 JavaScript 引擎的一部分，它维护了一个任务队列和一个调用堆栈。任务队列中存放的是待执行的异步任务，而调用堆栈存放的是当前正在执行的同步任务。

JavaScript 引擎会先执行调用堆栈中的任务，当调用堆栈为空时，引擎会查看任务队列，将其中的任务放入调用堆栈中执行。这个过程不断循环执行，因此被称之为事件循环。

任务队列的分类

在 JavaScript 中，任务队列可以分为宏任务和微任务。

宏任务

宏任务中包含了一些异步任务，例如：

• setTimeout 和 setInterval
• DOM 操作
• AJAX 请求
• 页面渲染

在每一次事件循环中，只会执行一个宏任务，但是在一个宏任务中可以包含多个微任务。

微任务

微任务是在宏任务执行完毕之后执行的异步任务。常见的微任务包括：

• Promise.then
• Object.observe
• MutationObserver

当一个宏任务中所有的任务都执行完毕之后，会执行当前任务队列中的所有微任务，之后再执行下一个宏任务。

示例

下面是一个简单的示例，用来说明事件循环的过程：

console.log('start')

setTimeout(() => {
    console.log('setTimeout')
}, 0)

Promise.resolve().then(() => {
    console.log('Promise')
})

console.log('end')

这段代码中，首先输出了 start，然后执行了 setTimeout 和一个 Promise，最后输出了 end。输出顺序如下：

start
end
Promise
setTimeout

在这个示例中，setTimeout 的回调函数和 Promise 的 then 函数都是微任务，它们会在当前宏任务执行完毕后执行。因此，Promise 先于 setTimeout 执行。

结论

JavaScript 中的事件循环机制是异步编程的核心，它允许我们在不阻塞主线程的情况下处理异步任务。理解事件循环的原理和分类是非常重要的，可以帮助我们更好地处理异步任务，避免出现阻塞主线程的情况。