核心是用整数变量存剩余秒数并每秒自减1，配合clearInterval精准终止；禁用时间戳计算以防休眠跳变；暂停恢复需保存remainingSeconds状态，防重复启动和竞态。
怎么用 setInterval 实现基础倒计时
核心就是靠 setInterval 定期减 1，配合 clearInterval 停止。别直接用 setTimeout 递归，容易因渲染延迟累积误差。
常见错误是把时间戳当剩余秒数用，比如 Date.now() 减去开始时间再除 1000 —— 这在页面切后台或系统休眠时会跳变，倒计时不准确。
- 用一个整数变量（如
secondsLeft）存剩余秒数，每次setInterval里自减 1 - 间隔设为
1000毫秒，不是999或1001，避免人为漂移 - 倒计时结束必须调用
clearInterval，否则定时器持续运行，内存泄漏+逻辑错乱
let secondsLeft = 60;
const timerId = setInterval(() => {
secondsLeft--;
document.getElementById('timer').textContent = secondsLeft;
if (secondsLeft <= 0) {
clearInterval(timerId);
}
}, 1000);
为什么 requestAnimationFrame 不适合做精确倒计时
requestAnimationFrame 的触发时机依赖屏幕刷新率（通常 60fps），且页面不可见时会被浏览器暂停。它适合动画帧同步，但不适合秒级精度的倒计时。
典型表现：切换标签页再切回来，倒计时“卡住”几秒后突然跳变；或者在低端设备上每帧间隔不稳定，导致倒计时忽快忽慢。
立即学习“前端免费学习笔记（深入）”；
- 如果硬要用，得配合
Date.now()计算真实流逝时间，代码变复杂，得不偿失 - 真要兼顾性能和精度，还是用
setInterval+ 时间戳校准（比如每 10 秒比对一次系统时间） - 移动端 WebView 中，
requestAnimationFrame暂停行为更激进，风险更高
如何让倒计时在页面隐藏时仍准确（不跳秒）
浏览器对后台标签页的 setInterval 有节流策略（最低 1s 一次），但实际可能被压到 1000ms 以上，导致倒计时变慢。解决思路是「视觉倒计时」和「逻辑倒计时」分离。
- 启动时记录目标时间点（如
endTime = Date.now() + 60000） - 定时器只负责更新 UI，每次读取
Math.max(0, Math.floor((endTime - Date.now()) / 1000)) - 这样即使定时器被节流，下次唤醒时也能立刻修正显示，不丢失秒数
- 注意：不能全靠这个，仍需
visibilitychange事件监听页面显隐，避免用户切回时 UI 卡顿
const endTime = Date.now() + 60000;
const timerId = setInterval(() => {
const remaining = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
document.getElementById('timer').textContent = remaining;
if (remaining === 0) clearInterval(timerId);
}, 1000);
document.addEventListener('visibilitychange', () => {
if (!document.hidden) {
// 页面重新可见时强制刷新一次，防止 UI 滞后
const remaining = Math.max(0, Math.floor((endTime - Date.now()) / 1000));
document.getElementById('timer').textContent = remaining;
}
});
计时器暂停/恢复功能怎么安全实现
暂停不是简单 clearInterval 就完事——你得记住暂停那一刻还剩多少秒，否则恢复时时间对不上。
- 不要存
setInterval的返回值作为状态，而要维护独立的状态变量：isRunning、remainingSeconds、timerId - 暂停时清除定时器，并记录当前
remainingSeconds；恢复时用这个值重新起一个setInterval - 如果支持多次暂停/恢复，注意避免重复调用
setInterval导致多个定时器并行（用timerId判空） - 用户快速连点「暂停」「恢复」，可能触发竞态，加个防抖（50ms）更稳妥
倒计时最麻烦的从来不是启动，而是处理各种中断场景：页面切后台、用户手动暂停、网络延迟影响服务端同步、甚至手机锁屏。这些地方一漏，用户就会觉得“不准”“卡了”“少了一秒”。真正健壮的实现，得把时间当作不可信的外部输入来对待。
