使用JS实现一个高精准定时器和延时器

 更新时间:2026年01月23日 10:00:56   作者:光影少年  
文章介绍了浏览器定时器不精准的原因,以及如何通过时间戳校正、递归setTimeout、requestAnimationFrame和WebWorker等方法实现高精准定时器,最后总结了不同定时器的适用场景,并给出了面试标准回答,需要的朋友可以参考下

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

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 或服务端时间同步。

以上就是使用JS实现一个高精准定时器和延时器的详细内容,更多关于JS实现定时器和延时器的资料请关注脚本之家其它相关文章!

相关文章

最新评论