使用 setinterval 每秒更新时钟最简单可靠；需避免重复调用、补零、时区错误；推荐 tolocaletimestring 或 intl.datetimeformat 处理本地化；务必清理定时器防止内存泄漏。
直接用 setInterval 每秒调用一次时间更新函数，是最简单、兼容性最好、也最不容易出错的方案。其他方式（比如 requestAnimationFrame）在特定场景下有优势，但对普通实时时钟来说属于过度设计。
用 setInterval 每秒更新一次 DOM
这是绝大多数项目实际采用的方式。核心逻辑是：获取当前时间 → 格式化 → 写入元素 → 每 1000ms 重复执行。
常见错误现象包括：setInterval 被重复调用导致多个定时器叠加、未用 padStart(2, '0') 补零导致 “9:5:7” 这类显示、直接拼接字符串忽略时区导致本地时间不准。
- HTML 中准备一个带
id的容器，例如<div id="clock"></div> - JavaScript 中定义更新函数，推荐用
textContent而非innerHTML（避免 XSS 和解析开销） - 格式化时优先使用
toLocaleTimeString()，它自动适配用户系统语言和时区；如需固定格式（如HH:mm:ss），再手动拼接并补零 - 调用
setInterval(updateClock, 1000)启动，不要写成setInterval("updateClock()", 1000)（字符串形式会触发eval，不安全且性能差）
为什么不用 setTimeout 递归？
setTimeout 递归写法（即每次执行完再设下一次）看似更“精准”，但实际并无必要，反而容易因忘记 clearTimeout 或异常中断导致定时器丢失。
关键区别在于：setInterval 是周期性调度，即使某次执行稍慢，下一次仍会在固定间隔触发；而 setTimeout 递归依赖上一次执行完成才设下一次，一旦 JS 主线程卡住（比如处理大量数据），时间就会明显滞后。
- 除非你在做高精度动画或音视频同步，否则不需要刻意规避
setInterval - 如果真要用
setTimeout递归，必须确保每次调用前都清除旧句柄（用变量存住上次的timeoutId，再clearTimeout） -
setInterval启动后，若页面切到后台标签页，浏览器通常会将间隔拉长至 ≥1000ms（甚至暂停），这是正常节电行为，无需额外干预
用 Intl.DateTimeFormat 支持多时区和本地化
单纯靠 new Date().getHours() 只能拿到用户本地时间，无法满足国际化需求。真正需要显示纽约、东京时间时，必须用 Intl.DateTimeFormat。
参数差异明显：{ timeZone: 'Asia/Tokyo' } 和 { hour12: false, hour: '2-digit', minute: '2-digit', second: '2-digit' } 可以组合出任意格式。
- 不要手动计算时差（比如 “北京时间+1”），时区规则复杂，夏令时、历史变更都会出错
- 每个时区应单独创建一个
Intl.DateTimeFormat实例，复用实例比每次都 new 更高效 - 若同时显示多个时区，建议为每个时钟分配独立的
setInterval，避免单个定时器里反复调用 format 方法影响性能
容易被忽略的清理动作
页面卸载或组件销毁时，setInterval 不会自动停止。如果用户长时间停留又频繁进出该页面，可能积累多个未清除的定时器，造成内存泄漏和时间错乱。
这不是理论风险——在 SPA 应用中，一个未清理的 setInterval 可能让后台标签页持续消耗 CPU。
- 保存
intervalId到变量，例如const timer = setInterval(...) - 监听
visibilitychange事件，在document.hidden === true时clearInterval(timer)，恢复可见时重新启动 - 在单页应用中，确保在组件
unmount阶段执行clearInterval（React 用useEffect清理函数，Vue 用onBeforeUnmount）
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
