应使用 setInterval 封装 updateClock 函数每秒调用 new Date() 并用 Intl.DateTimeFormat 格式化后写入缓存的 DOM 元素，页面卸载时需清除定时器以防内存泄漏。
用 setInterval 配合 new Date() 实时更新时间显示
直接在页面中插入一个 <span id="clock"></span>，再用 JavaScript 每秒调用一次 new Date() 生成格式化字符串并写入该元素。关键不是“获取时间”，而是“持续更新”——必须用 setInterval，不能只执行一次。
常见错误是把时间获取逻辑写在页面加载时就执行完，结果页面打开后时间永远卡在初始值。正确做法是把更新逻辑封装成函数，并用 setInterval(updateClock, 1000) 循环触发。
- 建议使用
toLocaleTimeString()而非手动拼接getHours()/getMinutes()，它自动适配用户本地时区和格式（如 12/24 小时制） - 避免用
setTimeout递归调用，容易因函数执行延迟导致时间跳秒或累积误差 - 如果页面可能长时间后台运行（如浏览器标签被切走），
setInterval在部分浏览器中会降频甚至暂停，此时可考虑监听visibilitychange事件手动同步一次
处理时区与格式：用 Intl.DateTimeFormat 精确控制输出
当需要固定显示东八区时间（而非用户本地时间），或要求统一为 “HH:mm:ss” 格式（不含 AM/PM），toLocaleTimeString() 的参数能力有限，应改用 Intl.DateTimeFormat。
它比字符串拼接更可靠，也比正则替换更健壮——尤其在处理夏令时、多语言环境时不会出错。
立即学习“前端免费学习笔记（深入）”；
- 显示北京时间：
new Intl.DateTimeFormat('zh-CN', { timeZone: 'Asia/Shanghai', hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' }) - 注意
timeZone是字符串，不是数字偏移量（如+0800），传错会导致静默失败或回退到本地时区 - 初始化
Intl.DateTimeFormat实例开销略大，应在setInterval外部创建一次，循环内复用.format(date)方法
避免 DOM 操作成为性能瓶颈：缓存元素引用并节流更新
如果页面已有大量动态内容，每秒都执行 document.getElementById('clock').textContent = ... 可能引发重排（reflow），尤其在低端设备上肉眼可见卡顿。
这不是时间逻辑的问题，而是 DOM 更新方式的问题。核心优化点有两个：缓存节点引用 + 避免无意义更新。
- 把
const clockEl = document.getElementById('clock')提到定时器外部，避免每次查找 DOM - 如果只要求“秒级精度”，无需每 1000ms 都更新——可以检查当前秒数是否变化后再写入，减少无效赋值（对高刷新率屏幕尤其有用）
- 不要在
setInterval中做复杂计算（如同时更新日期+星期+倒计时），拆分成多个独立定时器或统一调度，否则一个卡住会影响全部
页面卸载时记得清除定时器：防止内存泄漏
setInterval 返回的 ID 是一个整数，但如果不手动 clearInterval(id)，即使页面跳转或关闭，定时器仍可能在某些环境下继续持有作用域引用，阻碍垃圾回收。
这不是所有浏览器都会暴露的问题，但在单页应用（SPA）中反复进入/退出同一页面时极易复现——表现为时间越走越快，或者控制台报错 Cannot set property 'textContent' of null。
- 在页面即将卸载前清除：监听
beforeunload或pagehide事件（后者兼容性更好） - Vue/React 等框架中，应在组件
unmounted或useEffect清理函数中调用clearInterval - 调试时可在控制台输入
clearInterval(你的定时器ID)手动终止，验证是否真由它引起异常
