前端倒计时误差!

提示：记录工作中遇到的需求及解决办法

---

前言

前几天听说公司某个项目组，由于不对定时器进行误差处理，间接导致损失了几十万。。还被领导公开批评了。因为定时器误差，导致了公司几个单子处理失败。。。白白损失了 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 = () => {