技术问询：实现鼠标触发的页面定时刷新及移出持续刷新功能

需求回顾 #

• 触发mousemove事件后，每2秒自动刷新页面
• 在页面内进行操作时重置刷新计时器
• 鼠标移出页面后，保持每2秒持续刷新页面（原代码仅能实现单次刷新）

原代码存在的问题 #

1. 仅在鼠标移动时初始化计时器，鼠标移出页面后没有对应的逻辑维持计时器运行
2. 页面刷新后脚本重新执行，若此时鼠标不在页面内，无法触发mousemove事件，导致计时器无法启动，无法持续刷新
3. 缺少对鼠标移出页面事件的监听，无法保证移出后的持续刷新逻辑

修正后的代码 #

function autoLogoffMouseEvent() {
    const idleSeconds = 2;
    let idleTimer;

    // 封装页面刷新逻辑
    function triggerRefresh() {
        window.location.reload(true);
    }

    // 统一重置计时器的方法
    function resetTimer() {
        clearInterval(idleTimer);
        idleTimer = setInterval(triggerRefresh, idleSeconds * 1000);
    }

    // 页面内鼠标移动时重置计时器
    $(document).on('mousemove', resetTimer);

    // 鼠标移出页面时，确保计时器持续运行
    $(document).on('mouseleave', function() {
        if (!idleTimer) {
            resetTimer();
        }
    });

    // 页面加载时初始化计时器，避免鼠标未移动时不启动刷新
    resetTimer();
}

autoLogoffMouseEvent();

代码逻辑说明 #

• triggerRefresh函数：单独封装页面刷新操作，提升代码复用性
• resetTimer函数：统一处理清除旧计时器、创建新计时器的逻辑，确保每次操作后刷新周期重新计算
• mousemove事件监听：鼠标在页面内移动时触发计时器重置，满足“页面内操作重置计时器”的需求
• mouseleave事件监听：鼠标移出页面时检查计时器状态，若未启动则初始化，保证移出后持续执行刷新
• 页面加载时初始化计时器：解决页面刷新后，鼠标未在页面内导致无法触发mousemove、计时器不启动的问题

内容的提问来源于stack exchange，提问作者Adnan68