本文讲解如何正确实现倒计时定时器的重置逻辑，解决因变量作用域错误导致的重复弹窗问题，确保 `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）。

通过将定时器引用提升至共享作用域，并规范事件监听与清理流程，即可稳定实现「用户活跃即重置倒计时」的功能，杜绝多弹窗、计时不一致等常见问题。