前端如何实现一个高精准定时器和延时器

一、为什么浏览器定时器不精准？

1️⃣ JS 是单线程

主线程被占用 → 定时器回调延迟
UI / 渲染 / GC 都会阻塞

2️⃣ 浏览器最小时间精度限制

HTML5 规范限制（4ms）
后台 Tab 被强制降频（1000ms+）

3️⃣ setInterval 的"时间漂移"

复制代码

setInterval(fn, 1000);
// 实际执行时间 = 1000 + fn执行时间

👉 时间会越来越不准

二、高精准定时器的核心思想（先记住）

不用"执行次数"计时，而用"时间戳"对齐真实时间。

三、高精准延时器（setTimeout 替代方案）⭐

实现：时间戳校正法

复制代码

function preciseTimeout(fn, delay) {
  const start = performance.now();

  function loop() {
    const now = performance.now();
    if (now - start >= delay) {
      fn();
    } else {
      requestAnimationFrame(loop);
    }
  }

  loop();
}

为什么准？

使用高精度时钟 performance.now()
每帧校正误差

四、高精准定时器（setInterval 替代方案）⭐⭐

实现：递归 setTimeout + 时间修正

复制代码

function preciseInterval(fn, interval) {
  let expected = performance.now() + interval;

  function step() {
    const drift = performance.now() - expected;

    fn();

    expected += interval;
    setTimeout(step, Math.max(0, interval - drift));
  }

  setTimeout(step, interval);
}

核心点

不是简单等待 interval
每次都修正漂移

五、Web Worker 定时器（更准）🚀

为什么 Worker 更准？

不阻塞 UI 线程
不受页面渲染影响

worker.js

复制代码

setInterval(() => {
  postMessage(Date.now());
}, 1000);

主线程

复制代码

const worker = new Worker('worker.js');
worker.onmessage = () => {
  console.log('tick');
};

👉 计时类、音频、监控系统首选

六、requestAnimationFrame 方案（适合动画）

复制代码

let last = performance.now();

function rafTimer() {
  const now = performance.now();
  if (now - last >= 1000) {
    console.log('tick');
    last = now;
  }
  requestAnimationFrame(rafTimer);
}

rafTimer();

七、三种方案对比（面试必背）

方案	精度	适合场景
setTimeout	低	普通任务
时间校正	高	业务定时
Web Worker	很高	长期计时
RAF	高	动画 / UI

八、延时器 vs 定时器（概念区分）

类型	特点
延时器	执行一次
定时器	周期执行
高精准	基于时间差

九、后台 / 锁屏问题（高级）

问题

浏览器后台 Tab 会降频

解决方案

Web Worker
Visibility API + 校正
服务端时间对齐

十、30 秒面试标准回答（直接背）

浏览器原生定时器会因主线程阻塞产生时间漂移；

高精准定时器应基于时间戳校正，而不是固定间隔；

可以通过递归 setTimeout、requestAnimationFrame 或 Web Worker 提升精度；

对精度要求极高的场景应使用 Worker 或服务端时间同步。