本文介绍如何通过共享作用域的定时器引用，在12小时制和24小时制数字钟切换时，安全清除前一个定时器，避免多个 setTimeout 同时运行导致的时间显示混乱。
本文介绍如何通过共享作用域的定时器引用，在12小时制和24小时制数字钟切换时，安全清除前一个定时器，避免多个 `settimeout` 同时运行导致的时间显示混乱。
在实现双格式数字钟（12小时制与24小时制）时，若两个时钟函数各自独立调用 setTimeout 递归执行，而未主动清理对方的定时器，就会出现多个定时任务并发运行——结果是页面时间频繁跳变、格式混杂、CPU资源浪费，甚至引发不可预测的渲染冲突。
根本原因在于：每次调用 get12hrTime() 或 get24hrTime() 都会创建新的 setTimeout 实例，但旧的定时器仍在后台执行，且彼此互不知晓。解决的关键不是“阻止递归”，而是统一管理定时器生命周期——即使用全局（或模块级）可访问的变量存储当前活跃的定时器ID，并在启动新时钟前清除旧的。
✅ 正确做法如下：
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
- 声明共享定时器引用：将 t1 和 t2 提升至函数外部作用域（如模块顶层或 IIFE 内），确保两个函数均可读写；
- 切换前主动清理：get12hrTime() 启动前检查并清除 t2；get24hrTime() 启动前清除 t1；
- 每次只保留一个活跃定时器：避免竞态，保证逻辑单一、状态可控。
以下是优化后的完整实现（含错误预防与代码精简）：
// 全局定时器引用（避免污染 window，推荐用 const + 模块封装）
let currentTimer = null;
function get12hrTime() {
const date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
const session = hh >= 12 ? 'PM' : 'AM';
hh = hh % 12 || 12; // 更简洁处理 0→12、12→12、13→1 等逻辑
hh = hh < 10 ? `0${hh}` : hh;
mm = mm < 10 ? `0${mm}` : mm;
ss = ss < 10 ? `0${ss}` : ss;
document.getElementById("time").textContent = `${hh}.${mm}.${ss} ${session}`;
// 清除可能存在的旧定时器（无论来自哪个模式）
if (currentTimer) clearTimeout(currentTimer);
currentTimer = setTimeout(get12hrTime, 1000); // 直接传函数名，更清晰
}
function get24hrTime() {
const date = new Date();
let hh = date.getHours();
let mm = date.getMinutes();
let ss = date.getSeconds();
const session = hh >= 12 ? 'PM' : 'AM'; // 可选显示 AM/PM，但24h制通常不显示
hh = hh < 10 ? `0${hh}` : hh;
mm = mm < 10 ? `0${mm}` : mm;
ss = ss < 10 ? `0${ss}` : ss;
// 24小时制建议不显示 AM/PM；如需兼容可保留，但语义上应移除
document.getElementById("time").textContent = `${hh}.${mm}.${ss}`;
if (currentTimer) clearTimeout(currentTimer);
currentTimer = setTimeout(get24hrTime, 1000);
}
// 切换按钮示例（HTML 中绑定）
// <button onclick="get12hrTime()">12小时制</button>
// <button onclick="get24hrTime()">24小时制</button>⚠️ 注意事项：
- 不要在每次递归中重复声明 let t = setTimeout(...)：这会导致引用丢失，无法清除；
- 避免使用 setInterval 替代：虽更直观，但切换时仍需 clearInterval，且不易与当前模式解耦；
- 初始化防护：首次调用前确保 currentTimer 为 null 或 undefined，clearTimeout(null) 安全无副作用；
- 内存与性能：及时清除定时器可防止内存泄漏，尤其在单页应用中多次切换时；
- 扩展建议：可进一步封装为 Clock 类，支持 start(mode)、stop()、toggle() 方法，提升可维护性。
通过统一管理定时器引用，你不仅能彻底解决格式切换冲突，也为后续添加暂停、同步NTP、时区切换等功能打下坚实基础。
