理解JS事件循环

理解JS事件循环，需要掌握以下几个知识点：

1. JS运行时栈（Call Stack）：存储函数调用的栈结构，遵循先进后出的原则。

2. Web API: 浏览器提供的API，如setTimeout, setInterval, fetch等，支持异步操作。

3. 事件队列（Event Queue）：存储Web API中的回调函数。

4. Event Loop：事件循环机制，它负责检查Event Queue中是否有回调函数，并将它们添加到JS运行时栈中执行。

JS事件循环是一个事件驱动的模型。当JS执行时，它会在运行时栈中按照顺序逐行执行代码，碰到异步操作时就将其交给Web API处理，同时将对应的回调函数压入事件队列。当JS运行时栈为空时，事件循环开始检查事件队列，将里面的回调函数按顺序添加到运行时栈中执行。

下面是两个示例说明：

示例1：setTimeout(0)

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

在运行示例1时，JS程序将先输出start，紧接着将setTimeout函数压入Web API中，当1ms后，setTimeout函数的回调函数将被压入事件队列中。此时JS运行时栈为空，事件循环开始检查事件队列，并将回调函数添加到运行时栈中，最终输出setTimeout。

示例2：Promise

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

在运行示例2时，JS程序将先输出start，接着创建Promise对象并执行其中的回调函数，并将其压入Web API中。在回调函数中，输出Promise并调用resolve函数。resolve函数的回调函数将被压入事件队列中。此时JS运行时栈已经执行完毕，事件循环开始检查事件队列，并将resolve函数的回调函数添加到运行时栈中，最终输出then。

以上就是理解JS事件循环的完整攻略及示例说明。