JavaScript 如何使用 setTimeout 模拟实现 setInterval？

直接用 setInterval 有一个经典问题：如果回调执行时间超过了间隔时间，回调会在事件队列中堆积。用 setTimeout 递归模拟能解决这个痛点——每次回调执行完再设置下一次定时器，确保上一次执行完毕才开始下一轮计时。

javascript
function mySetInterval(fn, delay) {
  let timer = null;
  function loop() {
    fn();
    timer = setTimeout(loop, delay);
  }
  timer = setTimeout(loop, delay);
  return () => clearTimeout(timer);
}

const cancel = mySetInterval(() => console.log('tick'), 1000);
// cancel(); 需要停止时调用

核心思路：在回调函数末尾递归调用 setTimeout，使得下一次定时器只有在上一次回调执行完毕后才会被注册。返回一个取消函数，调用时 clearTimeout 清除当前等待中的定时器，递归链就此中断。

setInterval 的回调堆积问题

setInterval(fn, 100) 的行为是：每隔 100ms 向任务队列放入一个 fn，不管前一个 fn 是否执行完毕。如果 fn 执行需要 150ms：

• 100ms：第一个回调进入队列，开始执行
• 200ms：第二个回调进入队列（第一个还没执行完）
• 300ms：第三个回调进入队列

结果是回调不断排队，等当前任务执行完后，队列中的回调会连续执行，间隔远小于预期。这不是"跳过间隔"，而是"堆积后连续执行"。

setTimeout 模拟的优势与局限

优势：

• 不会回调堆积，每次执行完才开始计时下一轮
• 间隔更可控，实际间隔 ≈ delay + 回调执行时间

局限：

• 仍然不精确——setTimeout 只保证"至少延迟 delay 毫秒"，受事件循环和主线程阻塞影响
• 如果回调本身执行时间很长，实际间隔会远大于设定值

带错误处理的增强实现

基础版本有个隐患：回调抛异常时，递归链中断，定时器静默停止。加上 try-catch 可以保证异常不会打断后续执行：

javascript
function mySetIntervalSafe(fn, delay) {
  let timer = null;
  function loop() {
    try {
      fn();
    } catch (e) {
      console.error('定时器回调异常:', e);
    }
    timer = setTimeout(loop, delay);
  }
  timer = setTimeout(loop, delay);
  return () => clearTimeout(timer);
}

支持 this 绑定和参数传递

原生 setInterval 支持 setInterval(fn, delay, arg1, arg2) 的参数传递和 this 绑定。补全这两个能力：

javascript
function mySetIntervalFull(fn, delay, ...args) {
  let timer = null;
  const context = this;
  function loop() {
    try {
      fn.apply(context, args);
    } catch (e) {
      console.error('定时器回调异常:', e);
    }
    timer = setTimeout(loop, delay);
  }
  timer = setTimeout(loop, delay);
  return () => clearTimeout(timer);
}

// 用法：传递参数
mySetIntervalFull((name, count) => {
  console.log(`${name}: ${count}`);
}, 1000, 'tick', 42);

追问

如果需要真正精确的定时循环怎么办？

setTimeout 模拟解决的是回调堆积问题，不能解决定时精度问题。精确计时需要其他方案：

• requestAnimationFrame + performance.now()：适合动画循环，每帧检查时间戳决定是否执行
• Web Worker 定时器：在独立线程运行，不受主线程阻塞影响
• 时间戳补偿：记录预期执行时间和实际已执行次数，根据偏差动态调整下一轮 delay

能不能用 setInterval 模拟 setTimeout？

可以，执行一次后立即 clearInterval：

javascript
function mySetTimeout(fn, delay) {
  const id = setInterval(() => {
    fn();
    clearInterval(id);
  }, delay);
}

但实际中没人这么做——setTimeout 本身就是更合适的 API，这个追问考查的是对两个定时器语义的理解。

递归 setTimeout 会不会导致栈溢出？

不会。setTimeout 的回调是宏任务，每次执行时调用栈已经清空，递归是通过事件循环调度的，不是真正的函数递归调用，调用栈深度始终为 1。