使用 setTimeout 模拟 setInterval 的主要原因是为了解决 setInterval 在某些场景下可能带来的问题。虽然 setInterval 看起来更简单直接，但它的行为在一些复杂或异步任务中可能会导致不可预料的问题。而通过递归或链式调用 setTimeout，我们可以更好地控制定时任务的执行。

---

一、setInterval 的局限性

1. 重复执行不考虑异步操作完成时间

如果在 setInterval 中执行的是一个异步操作（如 AJAX 请求、动画、Promise 等），它不会等待上一次操作完成，就会开始下一轮执行。

setInterval(() => {
  console.log("start");
  setTimeout(() => {
    console.log("end");
  }, 2000); // 假设这个任务耗时 2 秒
}, 1000);

这段代码每秒启动一个任务，即使前面的任务还没完成。这可能导致多个任务重叠执行，造成资源竞争或数据混乱。

---

2. 无法动态调整间隔时间

setInterval 的时间间隔是固定的，一旦设置就很难动态修改。如果你需要根据运行时状态来调整下一次执行的时间，setInterval 就不太适合。

---

3. 清除机制不够灵活

如果任务出错或者中途需要停止，setInterval 需要手动调用 clearInterval，并且不能很好地与 Promise 或 async/await 结合使用。

---

二、使用 setTimeout 模拟 setInterval 的优势

通过递归调用 setTimeout，我们可以在每次任务完成后决定是否继续下一次执行，并且可以动态地控制下一次执行的时间。

✅ 示例：模拟 setInterval

function mySetInterval(fn, interval) {
  let timer;

  function loop() {
    fn(); // 执行任务
    timer = setTimeout(loop, interval); // 下一次执行
  }

  loop();

  return () => clearTimeout(timer); // 返回取消方法
}

// 使用
const cancel = mySetInterval(() => {
  console.log("tick");
}, 1000);

// 取消
// cancel();

---

三、适用场景对比

场景	推荐方式	说明
固定时间间隔，任务同步、轻量	setInterval	简单直接
异步任务、需要控制流程、动态间隔	setTimeout 模拟	更加灵活可控
需要结合 Promise / async-await	setTimeout 模拟	更容易集成
防止任务堆积、避免并发问题	setTimeout 模拟	安全可靠

特性	setInterval	setTimeout 模拟
执行机制	固定间隔触发回调	上次执行完成后才开始计算下一次
误差积累	可能因阻塞导致多次执行堆积	更稳定，不会累积调用
清除方式	使用 clearInterval()	同样可以使用 clearTimeout()
异常处理	如果某次执行抛出错误，后续仍会继续执行	若某次执行出错，整个链式调用终止
控制粒度	控制较粗，不能灵活控制下一次执行	可以在每次执行后决定是否继续
适用场景	简单定时任务	需要精确控制或动态调整的场景

---

四、总结

为什么要用 setTimeout 模拟 setInterval？

因为：

• 它能确保前一个任务完全结束后才触发下一个；
• 支持动态控制下一次执行的时间；
• 更容易处理错误和中断；
• 更好地支持异步逻辑和现代 JS 特性（如 async/await）；
• 避免任务堆积和并发问题。

所以，在需要更细粒度控制定时任务时，使用 setTimeout 模拟 setInterval 是一种更安全、更灵活的做法。

😊