一、定时器误差现象
通过以下代码可直观看到误差
const start = Date.now()
setTimeout(() => {
console.log('实际延迟:', Date.now() - start, 'ms') // 预期 100ms，实际输出可能为 105ms
}, 100)
二、误差产生原因
| 因素 | 影响说明 |
|---|---|
| 事件循环机制 | JS 单线程特性导致回调必须等待当前执行栈清空 |
| 最小延迟限制 | 浏览器默认最小延迟 4ms（嵌套超过 5 层后生效） |
| 系统时钟精度 | 操作系统定时器精度通常为 1-15ms |
| 主线程阻塞 | 同步代码执行时间过长会直接推迟回调执行 |
三、误差范围实测
通过 1000 次测试统计（Chrome 环境）
let totalError = 0 // 累计总误差
const testCount = 1000 // 测试次数（1000次）
for (let i = 0; i < testCount; i++) {
const delay = 100 // 预期延迟 100ms
const start = Date.now() / 记录定时器创建时的时间戳
setTimeout(() => {
const actual = Date.now() - start // 计算实际延迟时间
totalError += (actual - delay) // 累加误差（实际 - 预期）
}, delay)
}
// 结果输出（需等待所有回调执行）
setTimeout(() => {
console.log('平均误差:', totalError / testCount, 'ms') // 典型值：5-20ms
}, testCount * 2) // 2000ms 后输出结果（等待所有定时器完成）
四、误差范围总结
| 场景 | 典型误差范围 |
|---|---|
| 理想情况（无阻塞） | 1ms ~ 15ms |
| 中度阻塞（50ms 任务） | 50ms ~ 70ms |
| 重度阻塞（200ms 任务） | 200ms+ |
五、如何减少误差？
1、避免主线程阻塞
// 错误示例：同步阻塞
setTimeout(() => {}, 100)
for (let i = 0; i < 1e9; i++) {} // 阻塞 3 秒
// 正确做法：拆分任务
function chunkTask() {
// 使用 requestIdleCallback 或 Web Worker
}
2、使用高精度定时器
// Performance API 获取高精度时间戳
const start = performance.now()
setTimeout(() => {
const actual = performance.now() - start
}, 100)
3、Web Worker 并行处理
// 主线程
const worker = new Worker('timer-worker.js')
worker.postMessage({ delay: 100 })
// timer-worker.js
self.onmessage = (e) => {
setTimeout(() => {
self.postMessage('done')
}, e.data.delay)
}
六、特殊场景误差
- 后台标签页限制
- 浏览器对后台标签页的定时器最低限制为 1000ms（部分浏览器）
- 设备休眠状态
- 手机锁屏时定时器可能完全暂停
七、总结
setTimeout 的误差是 JavaScript 单线程模型下的必然结果。理解事件循环机制，避免主线程阻塞，必要时使用 Web Worker 或专用 API（如 requestAnimationFrame），才能最大限度优化定时精度。
