提示:记录工作中遇到的需求及解决办法
文章目录
- 前言
- 一、误差从何而来?
- 二、五大解决方案
-
- 1. 动态校准法(基础版)
- 2. Web Worker 计时
- 3. 服务器时间同步
- 4. Performance API 高精度计时
- 5. 页面可见性API优化
- 三、生产环境最佳实践
- 四、终极解决方案架构
前言
前几天听说公司某个项目组,由于不对定时器进行误差处理,间接导致损失了几十万。。还被领导公开批评了。因为定时器误差,导致了公司几个单子处理失败。。。白白损失了 money。
"倒计时误差"是前端开发中的经典问题,也是面试官考察候选人问题分析能力的高频考点
一、误差从何而来?
核心问题: 浏览器主线程的阻塞前端倒计时通常基于setInterval或setTimeout实现,而这两个API存在以下问题:
- 时间间隔不可靠:实际执行间隔 >= 设定值
- 事件循环被阻塞:同步代码、长任务、网络请求等
- 标签页休眠:浏览器后台运行时计时器会被限流(最小延迟4ms甚至更长)
- 系统休眠:电脑睡眠/锁屏会导致计时完全暂停
// 典型的误差累计示例
let count = 10
const timer = setInterval(() => {
count--
console.log(count)
}, 1000)
// 实际误差会随时间逐渐增大
二、五大解决方案
1. 动态校准法(基础版)
function accurateTimer(fn, interval) {
let expected = Date.now() + interval
let timeout
const tick = () =>