setinterval不准源于主线程阻塞、后台节流和系统休眠，导致时间漂移；正确做法是每次用new date()获取实时时间计算差值，结合visibilitychange监听页面可见性并做时间补偿。
直接用 setInterval + Date 就能跑起来，但秒针跳动卡顿、时区错乱、页面切后台后时间停走——这些才是真问题。
为什么 setInterval(fn, 1000) 显示的时间会漂移
浏览器的定时器不精确，尤其在页面被切换到后台或系统休眠后，setInterval 可能被节流甚至暂停，再恢复时直接“跳秒”。比如你设了每 1000ms 执行一次，实际可能 1200ms 才触发，下一次又延迟，累积几秒就明显不同步。
- 不要依赖多次调用的累计时间，每次都要重新读取
new Date() - 避免写成
let t = 0; setInterval(() => { t++; render(t); }, 1000)这类计数逻辑 - 如果需要毫秒级精度（如倒计时），改用
performance.now()配合时间差计算
用 toLocaleTimeString() 还是手动拼接 getHours() 等方法
toLocaleTimeString() 自动适配用户本地格式和时区，一行搞定，适合大多数场景；但无法控制前导零、分隔符或隐藏秒数。手动拼接更灵活，但必须自己处理时区、夏令时、12/24 小时制等细节。
- 显示给普通用户看：优先用
new Date().toLocaleTimeString('zh-CN', { hour12: false }) - 需要固定格式如
13:05:22：用getHours()+getMinutes()+getSeconds()，并补零 - 服务端时间对齐需求：必须用 UTC 时间（
getUTCHours()等）或传入 ISO 字符串构造Date
页面切到后台后时间停止更新怎么办
现代浏览器对非活跃标签页会限制 setInterval 最低间隔（常为 1000ms 或更粗），导致秒针“粘住”。这不是 bug，是省电策略。
- 检测页面可见性：
document.hidden或监听visibilitychange事件 - 切后台时暂存当前时间戳，恢复时用
new Date()减去上次时间，修正跳过的秒数 - 对精度要求不高（如仅展示）：可忽略；对倒计时/同步场景，必须做时间差补偿
requestAnimationFrame 能替代 setInterval 吗
不能直接替代。它按屏幕刷新节奏执行（通常 60fps），不是按时间触发——1 秒内可能执行 60 次，也可能因性能掉帧只执行 40 次。但它适合做平滑动画（如 Canvas 指针旋转），配合时间戳判断是否该更新数字。
- 纯数字时钟没必要用
requestAnimationFrame，徒增复杂度 - 指针式 Canvas 时钟推荐组合：
requestAnimationFrame驱动绘制 +new Date()获取真实时间 - 别在
requestAnimationFrame回调里写setTimeout(..., 1000)，这是反模式
最易被忽略的一点：时钟 DOM 元素必须存在且可写，否则 getElementById(...).innerHTML = ... 会静默失败。加个 if (!el) return 检查比靠 console 报错更可靠。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
