setInterval 是浏览器实时显示时间最直接有效的方法，需每次回调内调用 new Date() 并用 toLocaleTimeString('zh-CN', { hour12: false }) 格式化，DOM 元素应提前缓存，页面卸载时必须 clearInterval 防内存泄漏。
用 setInterval 更新页面时间最直接有效
浏览器里实时显示时间，核心就是定时重绘——setInterval 是最稳妥的选择，比 setTimeout 递归调用更易控、比监听系统时间变化更可靠。它不依赖事件触发，只要页面活着就持续跑。
常见错误是把 new Date() 写在定时器外，导致时间永远卡在初始值；或者用字符串拼接代替 Date.prototype.toLocaleTimeString()，结果时区或 12/24 小时制出错。
- 每次回调内必须重新调用
new Date()获取当前时刻 - 用
.toLocaleTimeString('zh-CN', { hour12: false })避免英文缩写和 AM/PM 干扰 - 间隔设为
1000毫秒即可，设太小（如 100）反而增加主线程负担，且人眼无法分辨
document.getElementById 取元素后直接赋值 textContent
不要用 innerHTML 插入纯文本时间，既不安全也不必要；更别用 innerText，它会触发重排，影响性能。真实项目中，DOM 查询应尽量提前缓存，避免每次都在定时器里重复查找。
典型场景：一个 <div id="clock"></div>，你只需要一次获取、反复更新。
立即学习“前端免费学习笔记（深入）”；
- 在
setInterval外先执行const clockEl = document.getElementById('clock') - 回调里只做
clockEl.textContent = now.toLocaleTimeString(...) - 如果页面可能动态增删该元素，需在回调开头加
if (!clockEl) return防崩
注意 toLocaleTimeString 的浏览器兼容性与参数差异
IE11 支持 toLocaleTimeString()，但不支持对象参数（如 { hour12: false }）。若需兼容老浏览器，得降级用 getHours()/getMinutes() 手动拼接，或引入轻量 polyfill。
现代项目中，更常见的坑是忽略语言环境导致格式异常：比如在英文系统下 toLocaleTimeString() 默认返回 "1:23:45 PM"，而中文用户期望 "13:23:45"。
- 显式传参
{ hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }控制输出字段 - 固定语言标签，如
'zh-CN'或'en-US'，避免随系统变 - Chrome/Firefox/Safari 均已完整支持，但 Electron 旧版 WebKit 内核可能有偏差，建议实测
页面卸载时记得清除 setInterval 防内存泄漏
很多人写了定时器就不管了，尤其 SPA 页面切换时，旧定时器还在后台跑，不断操作已销毁的 DOM，轻则报错 Cannot set property 'textContent' of null，重则拖慢整个应用。
这不是“可选优化”，而是必做清理动作。关键点在于：谁创建，谁销毁；什么时候销毁？页面不可见或组件卸载时。
- 用变量保存定时器 ID：
const timerId = setInterval(...) - 监听
beforeunload或 Vue/React 的onUnmounted等钩子，调用clearInterval(timerId) - 如果只是临时展示（比如弹窗里的倒计时），关闭弹窗时立刻清掉，别等页面刷新
真正麻烦的不是写几行代码，而是想到它——多数人直到看到控制台里每秒刷一条警告才意识到漏了这步。
