理解JS事件循环，需要掌握以下几个知识点：
-
JS运行时栈（Call Stack）：存储函数调用的栈结构，遵循先进后出的原则。
-
Web API: 浏览器提供的API，如setTimeout, setInterval, fetch等，支持异步操作。
-
事件队列（Event Queue）：存储Web API中的回调函数。
-
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事件循环的完整攻略及示例说明。
本站部分内容来源互联网,如果有图片或者内容侵犯了您的权益，请联系我们，我们会在确认后第一时间进行删除！