前端如何实现一个高精准定时器和延时器
一、为什么浏览器定时器不精准？
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 或服务端时间同步。