setTimeout和setInterval不能精确倒计时，因其仅保证“至少”等待指定时间；应以Date.now()或服务端时间戳为基准动态计算剩余时间，避免累加误差。
为什么 setTimeout 和 setInterval 不能精确倒计时
浏览器的定时器本身不保证精度，尤其在页面失焦、系统负载高或 JS 主线程阻塞时，setTimeout 和 setInterval 的回调可能被延迟数毫秒甚至数百毫秒。这不是 bug，而是事件循环机制决定的：它们只承诺“**至少**等待指定时间”，而非“**恰好**在那一刻执行”。直接用 setInterval(() => { sec-- }, 1000) 累计误差会越来越大，5 分钟后可能差 3–5 秒。
用 Date.now() 做基准时间校准
真正可控的方式是把倒计时目标时间（如 endTime = Date.now() + 60000）存下来，每次执行时用当前时间与之比对，而不是靠累加/递减变量。这样即使某次回调晚了 200ms，下一次计算仍基于真实流逝时间，不会漂移。
let endTime = Date.now() + 30000; // 30秒后结束
function tick() {
const remaining = Math.max(0, endTime - Date.now());
const sec = Math.floor(remaining / 1000);
console.log(`${sec} 秒`);
if (remaining > 0) {
requestAnimationFrame(tick); // 比 setInterval 更顺滑，且页面后台时自动暂停
} else {
console.log("倒计时结束");
}
}
tick();
-
requestAnimationFrame在页面可见时每帧触发（约 16ms），适合需要 UI 更新的场景；它在标签页失焦时自动降频或暂停，避免后台耗电 - 若需后台持续运行（如 PWA 中的离线倒计时），改用
setTimeout，但每次都要重新计算剩余毫秒数，不要固定间隔 - 别用
new Date().getTime()——Date.now()更轻量、无对象创建开销
处理时区与系统时间篡改风险
用户可能手动修改系统时间，或设备位于不同时区。如果倒计时关联服务器任务（如限时支付），仅依赖客户端时间不可靠。此时必须以服务端返回的 serverTime 和 expireAt（时间戳）为唯一依据，并在每次校准时做差值补偿：
// 假设从接口拿到：{ serverTime: 1718234567890, expireAt: 1718234627890 }
const serverOffset = Date.now() - response.serverTime; // 客户端与服务端时间差
const adjustedEnd = response.expireAt + serverOffset;
function getRemaining() {
return Math.max(0, adjustedEnd - Date.now());
}
- 首次获取时间差后，可定期（如每 30 秒）再请求一次
/time接口，更新serverOffset，抵消长时间运行后的漂移 - 绝对不要用
Intl.DateTimeFormat或toLocaleTimeString做倒计时逻辑——它们受时区和本地格式影响，只用于最终显示 - 移动端 WebView 中，某些安卓机型存在
Date.now()返回值异常的问题，建议 fallback 到performance.now()+ 首次时间戳锚定（需注意performance.now()是相对值）
如何让倒计时在页面切到后台后继续准确？
绝大多数情况下，你**不应该**让倒计时在后台“看起来”继续走。因为：setInterval 在后台会被限频（Chrome 通常降到 1s 一次），requestAnimationFrame 直接暂停，而强行用 Web Worker + setTimeout 也无法绕过系统休眠或进程冻结。更合理的做法是：监听 visibilitychange，记录挂起时刻，恢复时用服务端时间重算剩余。
立即学习“Java免费学习笔记（深入）”；
document.addEventListener('visibilitychange', () => {
if (document.hidden) {
pauseTime = Date.now();
} else if (pauseTime) {
// 页面切回前台，用服务端时间校准
fetch('/api/time').then(r => r.json()).then(data => {
const serverNow = data.serverTime;
const localElapsed = Date.now() - pauseTime;
// 补偿本地误差，重设 endTime
endTime = serverNow + (endTime - pauseTime);
pauseTime = null;
tick(); // 重启
});
}
});真需要后台高精度的场景（比如车载系统、kiosk 设备），得依赖原生容器或 WebRTC 心跳保活等非常规手段——纯 Web 标准下没有银弹。
