事件循环核心是宏任务与微任务调度。先执行同步代码，再清空微任务队列，随后取宏任务执行并立即处理其产生的微任务。该模拟通过CustomEventLoop类实现调用栈外的宏、微任务队列管理，postMacrotask和postMicrotask添加任务，runMicrotasks在每个宏任务后执行所有微任务，start方法用setTimeout驱动循环。示例验证了“微任务优先于宏任务”的执行顺序，如Micro 2 (top level)先于Macro 1输出，且Macro 1后紧跟其关联的Micro 1。扩展的scheduleMacrotask支持延迟执行，类似setTimeout。整个机制还原了JavaScript异步执行的关键流程：宏任务启动，微任务穿插，循环推进。
JavaScript 的事件循环是语言异步执行的核心机制。虽然浏览器和 Node.js 已经内置了事件循环，但通过模拟一个简化版本，可以更深入理解其工作原理。下面是一个可运行的自定义事件循环模拟实现。
基本概念：事件循环的组成
一个典型的 JavaScript 事件循环包含以下几个部分：
调用栈（Call Stack）：记录当前正在执行的函数。 宏任务队列（Macro Task Queue）：存放 setTimeout、setInterval、I/O 等宏任务。 微任务队列（Micro Task Queue）：存放 Promise.then、queueMicrotask 等微任务。 事件循环主体：不断从队列中取出任务执行。
实现一个简易的事件循环调度器
我们可以用 JavaScript 模拟一个单线程的事件循环流程，手动管理任务队列和执行顺序。
class CustomEventLoop { constructor() { this.macrotaskQueue = []; this.microtaskQueue = []; this.isRunning = false; } // 添加宏任务 postMacrotask(fn) { if (typeof fn === 'function') { this.macrotaskQueue.push(fn); } } // 添加微任务 postMicrotask(fn) { if (typeof fn === 'function') { this.microtaskQueue.push(fn); } } // 执行所有微任务（清空微任务队列） runMicrotasks() { while (this.microtaskQueue.length > 0) { const task = this.microtaskQueue.shift(); task(); } } // 启动事件循环 start() { if (this.isRunning) return; this.isRunning = true; const run = () => { // 先检查是否有宏任务 if (this.macrotaskQueue.length > 0) { const macrotask = this.macrotaskQueue.shift(); try { macrotask(); } catch (err) { console.error('Macrotask error:', err); } // 宏任务执行后，立即执行所有微任务 this.runMicrotasks(); } // 继续下一轮，模拟持续监听 if (this.macrotaskQueue.length > 0 || this.microtaskQueue.length > 0) { setTimeout(run, 0); // 使用 setTimeout 模拟非阻塞轮询 } else { this.isRunning = false; } }; setTimeout(run, 0); // 异步启动，避免阻塞当前调用栈 }}
使用示例：验证执行顺序
我们可以通过一段测试代码来验证这个模拟事件循环是否符合预期。
立即学习“Java免费学习笔记（深入）”；
const loop = new CustomEventLoop();loop.postMacrotask(() => { console.log('Macro 1'); loop.postMicrotask(() => { console.log('Micro 1 (after Macro 1)'); });});loop.postMicrotask(() => { console.log('Micro 2 (top level)');});loop.postMacrotask(() => { console.log('Macro 2');});// 输出顺序应为：// Micro 2 (top level)// Macro 1// Micro 1 (after Macro 1)// Macro 2loop.start();
注意：在这个模拟中，微任务在每个宏任务执行后立即清空，这与真实 JavaScript 引擎行为一致。
扩展功能：支持延迟任务（类似 setTimeout）
可以进一步扩展宏任务队列，支持定时触发。
// 在 CustomEventLoop 类中添加：scheduleMacrotask(fn, delay = 0) { setTimeout(() => { this.postMacrotask(fn); if (!this.isRunning) { this.start(); // 如果事件循环未运行，启动它 } }, delay);}// 使用示例：loop.scheduleMacrotask(() => { console.log('Delayed macro task');}, 1000);
基本上就这些。这个模拟虽然简化，但体现了事件循环的核心逻辑：先执行同步代码，再处理微任务，然后取下一个宏任务，循环往复。不复杂但容易忽略的是微任务在每次宏任务后立刻执行这一关键点。
以上就是如何实现一个自定义的JavaScript事件循环模拟？的详细内容，更多请关注创想鸟其它相关文章！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 chuangxiangniao@163.com 举报，一经查实，本站将立刻删除。
发布者：程序猿，转转请注明出处：https://www.chuangxiangniao.com/p/29736.html
微信扫一扫 
支付宝扫一扫 
