本文讲解如何正确实现倒计时定时器的重置逻辑，解决因变量作用域错误导致的重复弹窗问题，确保 `mousemove` 或 `keypress` 事件触发时仅重置一次定时器并重新开始计时。
在 Web 应用中，常需实现「用户不操作则自动登出」的会话超时倒计时（如 10 分钟），并在检测到用户活动（如鼠标移动、键盘输入）时重置倒计时。但初学者容易陷入一个典型陷阱：将 setInterval 返回的定时器 ID（如 x）定义在函数局部作用域内，却试图在外部函数中清除它——这会导致 clearInterval 失效，旧定时器持续运行，新定时器又被创建，最终引发多次 alert 弹窗、时间显示错乱甚至内存泄漏。
✅ 正确做法：提升定时器变量至共享作用域
核心修复点是将 timer 变量声明在全局（或模块级）作用域，使其可被 countdown() 和 resetTimer() 共同访问：
// ✅ 正确定义：timer 在函数外声明，供所有函数共享
let timer = null;
jQuery(document).ready(function () {
// 绑定全局活动监听（推荐：使用 document 而非 this，更明确）
$(document).on('mousemove keypress', resetTimer);
});
function resetTimer() {
if (timer) {
clearInterval(timer); // 安全清除（避免对 null 调用）
}
countdown(); // 重启倒计时
}
function countdown() {
const countDownDate = Date.now() + 10 * 60 * 1000; // 10 分钟后（单位：毫秒）
// ✅ 关键：将 setInterval 返回值赋给共享变量 timer
timer = setInterval(() => {
const now = Date.now();
const distance = countDownDate - now;
if (distance <= 0) {
clearInterval(timer);
document.getElementById("SessionCookieExpirationCountdown").textContent = "Countdown End";
timeup();
return;
}
const minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60));
const seconds = Math.floor((distance % (1000 * 60)) / 1000);
document.getElementById("SessionCookieExpirationCountdown").textContent =
`Logging out in ${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
}, 1000);
}
function timeup() {
alert('Time\'s up! You will be logged out.');
}⚠️ 注意事项与最佳实践
- 避免重复绑定：$(document).on('mousemove keypress', ...) 比分别绑定两次更简洁高效，且防止多次 ready 执行导致重复监听。
- 防御性清除：resetTimer() 中先判断 if (timer) 再 clearInterval，避免首次调用时对 null 操作报错。
- 时间格式优化：添加秒数补零（seconds
-
HTML 结构建议：
- 进阶考虑：生产环境应替换 alert 为非阻塞 UI 提示（如 Toast），并集成真正的会话销毁逻辑（如调用登出 API）。
通过将定时器引用提升至共享作用域，并规范事件监听与清理流程，即可稳定实现「用户活跃即重置倒计时」的功能，杜绝多弹窗、计时不一致等常见问题。
