前端实现一个高精准定时器和延时器的完整代码
作者：光影少年
定时器和延时器是非常常用的功能,用于在指定的时间后执行某些操作,这篇文章主要介绍了前端实现一个高精准定时器和延时器的完整代码,需要的朋友可以参考下
一、为什么浏览器定时器不精准？
JS 是单线程
- 主线程被占用 → 定时器回调延迟
- UI / 渲染 / GC 都会阻塞
浏览器最小时间精度限制
- HTML5 规范限制（4ms）
- 后台 Tab 被强制降频（1000ms+）
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 或服务端时间同步。
到此这篇关于前端实现一个高精准定时器和延时器的文章就介绍到这了,更多相关前端实现定时器和延时器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！