首页 > 文章 > 前端

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

时间：2025-10-18 10:04:29 138浏览收藏

有志者，事竟成！如果你在学习文章，那么本文《手动实现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);

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

今天带大家了解了的相关知识，希望对你有所帮助；关于文章的技术知识我们会一点点深入介绍，欢迎大家关注golang学习网公众号，一起学习编程~