页面加载后追踪非活跃鼠标：移动端无需前置操作触发防抖函数

问题核心是原代码仅在首次鼠标移动时才会初始化防抖计时器，要实现页面加载后直接启动计时，只需主动触发一次防抖函数即可，具体修改如下：

修改后的主代码 #

if (width <= 480) {
  const inactiveUserMessage = () => {
    console.log("mouse has been inactive for 10 seconds");
  };
  // 生成防抖处理后的函数
  const debouncedInactive = debounce(inactiveUserMessage, 10000);
  // 页面加载后立即调用，启动初始计时
  debouncedInactive();
  // 绑定鼠标移动事件，每次移动重置计时
  document.addEventListener("mousemove", debouncedInactive);
}

原理说明 #

• 原防抖函数的逻辑是：每次触发事件时清除旧计时器，创建新计时器；只有当事件触发（这里是mousemove）时才会初始化计时器。
• 主动调用debouncedInactive()后，页面加载时就会创建第一个计时器，开始10秒倒计时；之后每次鼠标移动都会重置这个计时器，确保只有在连续10秒无操作时才执行inactiveUserMessage。

可选补充（处理窗口尺寸变化） #

如果需要支持用户旋转屏幕等尺寸变化场景，可以监听resize事件动态调整：

function handleMobileInactive() {
  const width = window.innerWidth;
  // 需存储防抖函数引用，用于移除监听
  let debouncedInactive;
  
  if (width <= 480) {
    const inactiveUserMessage = () => {
      console.log("mouse has been inactive for 10 seconds");
    };
    debouncedInactive = debounce(inactiveUserMessage, 10000);
    debouncedInactive();
    document.addEventListener("mousemove", debouncedInactive);
  } else {
    // 非移动端移除事件监听
    if (debouncedInactive) {
      document.removeEventListener("mousemove", debouncedInactive);
    }
  }
}

// 页面加载时执行
handleMobileInactive();
// 监听窗口尺寸变化
window.addEventListener("resize", handleMobileInactive);

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