为何跟踪用户会话的JavaScript函数返回负秒数？

兄弟，这种负数时间的问题我之前也碰到过，大概率是时间计算的逻辑顺序搞反了，或者全局变量的更新没跟上。咱们一步步来排查解决：

1. 检查时间差的计算顺序 #

出现负数最常见的原因就是时间计算的方向搞反了：你可能用「最后活动时间 - 当前时间」来计算流逝时长，这自然会得到负数。正确的逻辑应该是用当前时间戳减去最后一次用户活动的时间戳，得到用户已经非活跃的时长。

错误示例：

// 反向计算会得到负数
const elapsed = lastActivityTime - Date.now();

正确示例：

// 当前时间 - 最后活动时间 = 已流逝的非活跃时长
const elapsed = Date.now() - lastActivityTime;

2. 确保全局变量的初始化与更新正确 #

你的lastActivityTime全局变量必须在页面加载时就初始化，并且在用户每次和页面交互时（点击、鼠标移动、按键等）及时更新。如果更新不及时，会导致计算出来的流逝时长远超实际，甚至出现负数。

示例代码：

// 全局变量初始化
let sessionMinutes = 5; // 设置会话时长（分钟）
let lastActivityTime = Date.now(); // 页面加载时记录初始时间
let sessionTimer = null; // 用于存储计时器ID

// 监听用户交互事件，更新活动时间
document.body.addEventListener('mousemove', refreshActivity);
document.body.addEventListener('click', refreshActivity);
document.body.addEventListener('keydown', refreshActivity);

function refreshActivity() {
  lastActivityTime = Date.now(); // 更新为当前时间
  // 重置计时器：清除旧的，启动新的
  if (sessionTimer) {
    clearTimeout(sessionTimer);
    startSessionTracker();
  }
}

3. 修正会话剩余时间的计算逻辑 #

会话总时长是sessionMinutes * 60 * 1000（转成毫秒），剩余时间应该是「总时长 - 已流逝的非活跃时长」。当剩余时间小于等于0时，就该触发警告模态框，同时重置会话时间，避免一直出现负数。

完整的跟踪函数示例：

function startSessionTracker() {
  const totalSessionMs = sessionMinutes * 60 * 1000;
  
  sessionTimer = setTimeout(() => {
    const inactiveMs = Date.now() - lastActivityTime;
    const remainingMs = totalSessionMs - inactiveMs;

    if (remainingMs <= 0) {
      // 触发警告模态框
      showWarningModal();
      // 重置会话，重新开始计时
      lastActivityTime = Date.now();
      startSessionTracker();
    } else {
      // 可以在这里更新页面上的倒计时显示
      const remainingSeconds = Math.floor(remainingMs / 1000);
      console.log(`剩余会话时间：${remainingSeconds}秒`);
      // 继续下一秒的检查
      startSessionTracker();
    }
  }, 1000); // 每秒检查一次状态
}

// 警告模态框函数示例
function showWarningModal() {
  if (confirm('您已经很久没有操作了，是否继续会话？')) {
    lastActivityTime = Date.now();
    startSessionTracker();
  } else {
    // 这里可以添加退出会话的逻辑，比如跳转登录页
    console.log('用户选择退出会话');
  }
}

// 页面加载时启动跟踪
window.addEventListener('load', startSessionTracker);

4. 避免计时器累积问题 #

如果用户频繁交互时没有清除旧的计时器，会导致多个计时器同时运行，时间计算会混乱甚至出现异常值。所以一定要在每次更新活动时间时，先清除之前的计时器，再启动新的。

按照上面的逻辑调整后，应该就不会出现负数的会话秒数了，你可以先测试一下基础的时间计算部分，确认没有问题后再整合模态框的逻辑。

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