使用JS实现一个高精准定时器和延时器
作者：光影少年
文章介绍了浏览器定时器不精准的原因,以及如何通过时间戳校正、递归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实现定时器和延时器的资料请关注脚本之家其它相关文章！