事件循环核心是宏任务与微任务调度。先执行同步代码，再清空微任务队列，随后取宏任务执行并立即处理其产生的微任务。该模拟通过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 2
loop.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);
基本上就这些。这个模拟虽然简化，但体现了事件循环的核心逻辑：先执行同步代码，再处理微任务，然后取下一个宏任务，循环往复。不复杂但容易忽略的是微任务在每次宏任务后立刻执行这一关键点。
