当前位置：首页 > 文章列表 > 文章 > 前端 > 手动实现JS事件循环模拟方法解析

手动实现JS事件循环模拟方法解析

2025-09-29 09:48:31 0浏览收藏

本篇文章主要是结合我之前面试的各种经历和实战开发中遇到的问题解决经验整理的，希望这篇《手动实现JavaScript事件循环模拟方法》对你有很大帮助！欢迎收藏，分享给更多的需要的朋友学习~

事件循环核心是宏任务与微任务调度。先执行同步代码，再清空微任务队列，随后取宏任务执行并立即处理其产生的微任务。该模拟通过CustomEventLoop类实现调用栈外的宏、微任务队列管理，postMacrotask和postMicrotask添加任务，runMicrotasks在每个宏任务后执行所有微任务，start方法用setTimeout驱动循环。示例验证了“微任务优先于宏任务”的执行顺序，如Micro 2 (top level)先于Macro 1输出，且Macro 1后紧跟其关联的Micro 1。扩展的scheduleMacrotask支持延迟执行，类似setTimeout。整个机制还原了JavaScript异步执行的关键流程：宏任务启动，微任务穿插，循环推进。

如何实现一个自定义的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); // 异步启动，避免阻塞当前调用栈
  }
}

使用示例：验证执行顺序

我们可以通过一段测试代码来验证这个模拟事件循环是否符合预期。

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);

基本上就这些。这个模拟虽然简化，但体现了事件循环的核心逻辑：先执行同步代码，再处理微任务，然后取下一个宏任务，循环往复。不复杂但容易忽略的是微任务在每次宏任务后立刻执行这一关键点。

本篇关于《手动实现JS事件循环模拟方法解析》的介绍就到此结束啦，但是学无止境，想要了解学习更多关于文章的相关知识，请关注golang学习网公众号！