如何实现自定义setTimeout函数？解析其异步工作原理

嘿，这个问题问得特别到位——其实setTimeout的“神奇”之处，全靠JavaScript的**事件循环（Event Loop）**在背后支撑，咱们一步步把它拆明白：

为什么你的示例代码里回调永远不执行？ #

你说的没错，JavaScript是单线程的，所有同步任务都会在主线程的调用栈里依次执行。咱们拆解下你的代码执行流程：

1. 调用setTimeout时，浏览器/Node.js会把你的回调函数放到**宏任务队列（Macro Task Queue）**里，同时记录好它的延迟时间（3000ms），然后立刻返回，主线程继续执行下一行代码。
2. 接下来的while(1)是个死循环，它会一直占着主线程的调用栈，永远不会结束。
3. 事件循环有个铁规则：只有当主线程的调用栈完全清空时，它才会去检查任务队列里的任务。但这个死循环永远不让调用栈空出来，所以任务队列里的回调永远没机会被拿到调用栈执行。

setTimeout何时检查时间是否到达？ #

当主线程的调用栈为空时，事件循环会先处理完所有微任务（比如Promise的回调），然后去遍历宏任务队列：

• 它会逐个检查队列里的任务，看任务记录的延迟时间是否小于等于当前时间。
• 只有满足时间条件的任务，才会被放到调用栈里执行。
• 注意：这里的延迟是最小延迟，不是精确时间。如果主线程被其他耗时任务占着，回调的执行时间会被推迟。

如何自己实现一个非阻塞的延迟函数？ #

核心原则是：绝对不能用同步循环（比如while）来等待，那样会直接阻塞线程。必须借助事件循环的异步API，让浏览器/Node.js在空闲时帮我们检查时间。

浏览器环境下的实现（用requestAnimationFrame） #

requestAnimationFrame会把回调绑定到浏览器的重绘周期，每次重绘前（主线程空闲时）执行一次，完全不会阻塞线程：

function mySetTimeout(callback, delay) {
  // 记录开始时间
  const startTime = Date.now();
  
  // 递归检查时间的函数
  function checkDelay() {
    // 如果当前时间减去开始时间 >= 延迟时间，执行回调
    if (Date.now() - startTime >= delay) {
      callback();
      return;
    }
    // 否则，继续让浏览器在下一次重绘前检查
    requestAnimationFrame(checkDelay);
  }
  
  // 启动检查
  checkDelay();
}

// 测试一下：不会阻塞线程
mySetTimeout(() => console.log('3s后执行'), 3000);
// 这里写其他代码，完全不会被阻塞
console.log('这行代码会立刻执行');

Node.js环境下的实现（用setImmediate） #

Node.js里可以用setImmediate来模拟类似的逻辑，它会把回调放到下一次事件循环的检查阶段：

function mySetTimeout(callback, delay) {
  const startTime = Date.now();
  
  function checkDelay() {
    if (Date.now() - startTime >= delay) {
      callback();
      return;
    }
    // 下一次事件循环再检查
    setImmediate(checkDelay);
  }
  
  checkDelay();
}

核心总结 #

• JavaScript单线程 + 事件循环是所有异步API的基础，setTimeout也不例外。
• setTimeout的回调不会立刻执行，只会在主线程空闲且延迟时间到了之后，才会被事件循环调度执行。
• 自己实现非阻塞延迟函数，必须依赖事件循环提供的异步任务API（比如requestAnimationFrame、setImmediate等），通过轮询时间来触发回调，绝对不能用同步循环阻塞主线程。

内容的提问来源于stack exchange，提问作者膼inh Anh Huy