在拖拽操作中重复调用 `setinterval` 会导致多个定时器同时运行，造成计时混乱；解决方法是将定时器 id 提升至全局作用域，并在每次启动新定时器前调用 `clearinterval` 清除旧定时器。
在实现如“汉诺塔”这类带倒计时机制的交互游戏时，一个常见需求是：每当用户开始拖拽某个元素（如圆盘），倒计时就应重置为初始值（例如 10 秒），并重新开始计时。但若直接在 start 回调中反复调用 timer()，而未清理前一次的 setInterval，就会导致多个定时器并发执行——表现为倒计时跳变加快、多次弹出“Game over”警告，甚至页面异常刷新。
根本原因在于：setInterval 返回一个唯一的定时器 ID（数值），只有通过 clearInterval(id) 才能终止对应任务；而原代码中 downloadTimer 是函数内局部变量，每次调用 timer() 都会创建全新变量，旧定时器 ID 丢失，无法清除。
✅ 正确做法是：
HISUI 前端框架开发指南（IRIS版）
下载
HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库，专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考，支持声明式与编程式两种初始化方式，提供 $cm/$m 数据访问方法。
- 将定时器 ID 声明为模块级（或全局）变量，确保可被多次访问与清除；
- 在 timer() 函数开头主动清除已有定时器，避免残留；
- 启动新定时器后，将新 ID 赋值给该变量，维持最新引用。
以下是优化后的完整实现：
// ✅ 全局声明定时器 ID（推荐放在闭包或模块顶层）
let downloadTimer = null;
function timer() {
// ? 每次启动前先清除可能存在的旧定时器
if (downloadTimer !== null) {
clearInterval(downloadTimer);
}
let timeleft = 10;
downloadTimer = setInterval(() => {
if (timeleft <= 0) {
clearInterval(downloadTimer); // ✅ 清理自身，防内存泄漏
alert("Game over! You ran out of time\nPlay again ?");
location.reload();
} else {
timeleft -= 1;
document.getElementById("timer").textContent = timeleft;
}
}, 1000);
}
function Drag() {
$(".draggable").draggable({
stack: $(".draggable"),
helper: "clone",
start: function () {
timer(); // ✅ 每次拖拽开始即重置计时
// 其余逻辑（如记录平台、序列等）保持不变
const parentNode = "#" + this.parentNode.id;
platforms.push(parentNode);
const shape = "#" + this.id;
sequence.push(shape);
const shapeParent = "#" + this.closest(".holder").id;
}
});
}⚠️ 注意事项：
- 不要使用 var downloadTimer 在函数内重复声明，否则无法跨调用共享；
- clearInterval(null) 或 clearInterval(undefined) 是安全的，不会报错，因此可省略判空（但显式判断更清晰）；
- 若应用需支持多实例（如多个独立计时区域），建议封装为类或工厂函数，避免全局污染；
- 更现代的替代方案是使用 setTimeout 递归调用（更易控制、无 ID 管理负担），但 setInterval 在简单倒计时场景中仍简洁高效。
总结：定时器管理的核心原则是「一启一清」——每次新建前必清旧，每次结束时必清己。这不仅是解决重叠计时的关键，更是编写健壮前端定时逻辑的基本功。
