如何在setInterval中重置变量？JS闲置登出定时器重置失败问题

核心问题分析 #

你的代码存在两个关键问题导致定时器无法正确重置：

• 仅通过清空#idleTime输入框标记活动，但内存中的idleTime变量未被直接重置，定时器执行时的取值逻辑存在延迟
• 用户活动事件监听不全面，仅覆盖鼠标移动和按键操作，遗漏了点击、滚动等常见交互行为

修改后的代码 #

if ($isManager || $isAdmin) {  ?>
    var total_session_time = 180; // 闲置超时秒数
    var clock_time_start = total_session_time + 1;
    var idleTime = 0;
    $(document).ready(function() {
        var sms_access_page = $('#sms_page_access').val();
        var idleInterval = setInterval(function() {
            if ($('#pauseLogoutScript').val() == 0) {
                idleTime += 5; // 每5秒累加闲置时长
            }
            
            if (idleTime > total_session_time) {
                const count = clock_time_start - idleTime;
                if (count <= 0) {
                    if (sms_access_page !== '' && sms_access_page == '7') {
                        console.log('sms页面不执行登出');
                    } else {
                        console.log('执行登出');
                        window.location = 'index.php?r=site/logout';
                    }
                }
            }
        }, 5000);

        // 统一重置闲置时间的逻辑
        const resetIdleTimer = () => {
            idleTime = 0;
        };

        // 监听所有常见用户活动事件
        $(document).on('mousemove keypress click scroll', resetIdleTimer);
    });
<?php }          ?>

关键改动说明 #

• 移除DOM状态依赖：不再通过#idleTime输入框存储闲置状态，直接用内存变量idleTime维护，避免DOM操作带来的状态不同步问题
• 统一重置逻辑：封装resetIdleTimer函数，用户触发任何活动事件时立即将idleTime设为0，确保定时器计数被实时重置
• 扩展事件覆盖范围：新增click和scroll事件监听，覆盖更多用户交互场景，避免遗漏活动行为导致的定时器未重置问题

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