如何在JavaScript中以最高精度恒定速率执行函数？

其实你遇到的问题，根源在于setInterval本身的局限性——它是按固定的时间间隔去触发回调，但JavaScript是单线程的，如果主线程被其他任务（比如页面渲染、别的脚本执行）占着，回调就会被推迟，而且它完全不管上一次回调有没有执行完，时间久了偏差会越积越多，自然不同时间段的执行次数就不一样了。

要解决这个精度问题，更好的思路是用setTimeout递归调用，每次根据上一次实际执行的时间来计算下一次的触发时机，这样能把之前的延迟给“补”回来，保持整体的执行速率稳定。

给你写个实用的实现示例：

class PreciseInterval {
  constructor(callback, intervalMs) {
    this.callback = callback;
    this.intervalMs = intervalMs;
    this.lastRunTime = null;
    this.timeoutId = null;
  }

  start() {
    // 记录第一次执行的时间
    this.lastRunTime = performance.now();
    this._scheduleNext();
  }

  _scheduleNext() {
    const now = performance.now();
    // 计算下一次应该执行的时间点：上一次执行时间 + 设定间隔
    // 再减去当前已经过去的时间，得到需要延迟的时长
    const delay = this.lastRunTime + this.intervalMs - now;
    // 防止延迟为负数（如果上一次执行超时了，立刻执行下一次）
    const actualDelay = Math.max(0, delay);

    this.timeoutId = setTimeout(() => {
      this.callback();
      // 更新上一次执行的时间为当前实际执行的时间
      this.lastRunTime = performance.now();
      // 递归调度下一次
      this._scheduleNext();
    }, actualDelay);
  }

  stop() {
    if (this.timeoutId) {
      clearTimeout(this.timeoutId);
      this.timeoutId = null;
    }
  }
}

// 怎么用呢？比如你的场景：
const preciseTimer = new PreciseInterval(() => {
  this.foo(); // 替换成你要执行的函数
}, 30);
preciseTimer.start();

// 想要停止的时候调用这个：
// preciseTimer.stop();

这里有几个关键细节要注意：

• 用performance.now()而不是Date.now()：performance.now()的精度更高（一般到微秒级），而且不会受系统时间调整的影响，用来计算时间差最合适不过。
• 动态计算延迟时间：每次调度下一次的时候，都会根据上一次的实际执行时间来调整延迟，哪怕某次执行被推迟了，下一次也会自动缩短延迟，把节奏拉回来，保证整体的执行次数和预期一致。
• 用类封装起来，方便你管理启动、停止的逻辑，也避免全局变量的混乱。

不过得实话实说：这种方式也做不到绝对100%精确，毕竟JavaScript是单线程的，如果有长时间运行的任务（比如复杂的DOM操作、大循环）占着主线程，回调还是会被推迟。但这已经是浏览器环境下能实现的最高精度的恒定速率执行方式了。

如果是在Node.js环境下，还可以考虑用setImmediate结合时间计算，或者把任务放到worker_threads里执行，避免阻塞主线程，但浏览器里就只能用上面的方法啦。

备注：内容来源于stack exchange，提问作者Avraham