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

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

// 在 CustomEventLoop 类中添加：
scheduleMacrotask(fn, delay = 0) {
  setTimeout(() => {
    this.postMacrotask(fn);
    if (!this.isRunning) {
      this.start(); // 如果事件循环未运行，启动它
    }
  }, delay);
}

// 使用示例：
loop.scheduleMacrotask(() => {
  console.log('Delayed macro task');
}, 1000);