本文介绍如何通过共享作用域中的定时器引用，实现在12小时制与24小时制数字时钟之间无缝切换，并确保旧定时器被正确清除，避免时间显示冲突。
本文介绍如何通过共享作用域中的定时器引用，实现在12小时制与24小时制数字时钟之间无缝切换，并确保旧定时器被正确清除，避免时间显示冲突。
在构建交互式数字时钟时，一个常见需求是提供「格式切换」功能（如 12 小时制 ↔ 24 小时制），但若两个时钟函数各自独立调用 setTimeout 且未管理定时器生命周期，就会导致多个递归定时器同时运行——结果是页面时间不断闪动、逻辑混乱，甚至出现时间跳变或内存泄漏。
根本原因在于：每次调用 get12hrTime() 或 get24hrTime() 都会创建新的 setTimeout 实例，而前一个定时器仍在后台执行，未被显式清除。JavaScript 的 clearTimeout() 可以终止指定 ID 的定时器，但前提是该 ID 必须可被两个函数共同访问和修改。
✅ 正确做法是将定时器 ID 声明在外部共享作用域（如全局或模块级），使两个函数都能读取、判断并清除对方的定时器：
let t1 = null; // 存储 12 小时制定时器 ID
let t2 = null; // 存储 24 小时制定时器 ID
function get12hrTime() {
const date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
let session = "AM";
if (hh === 0) hh = 12;
else if (hh > 12) {
hh -= 12;
session = "PM";
}
hh = hh = 12 ? "PM" : "AM";
hh = hh <p>? <strong>关键要点与最佳实践：</strong> </p>
- ✅ 统一管理定时器引用：t1 和 t2 必须声明在函数外部（推荐 let 而非 var，避免变量提升干扰）；
- ✅ 清除后再设置：每次启动新时钟前，先检查并清除另一个格式的残留定时器，防止竞态；
- ✅ 及时置空引用：clearTimeout() 后将对应变量设为 null，便于后续条件判断，也利于垃圾回收；
- ⚠️ 避免重复启动：可在切换按钮中增加防抖或状态锁（如 isRunning 标志），防止用户快速连点触发冗余调用；
- ? 进阶优化：可合并为单一时钟函数，通过参数控制格式（如 renderClock(format = '12h')），进一步减少代码冗余与维护成本。
这样设计后，无论用户点击多少次格式切换按钮，页面始终只运行一个精确、稳定的定时器，时间显示流畅一致，真正实现「一键切换、毫秒同步」的用户体验。
