js判断用户长时间无操作

1. 背景

最近开发项目时，常碰到"用户在一定时间内无操作时，跳转到某个页面"的需求。

网上冲浪后，也没有找到一个比较好的js封装去解决这个问题，从而决定自己实现。

2. 如何判断用户长时间无操作

用户操作网页，无非就是通过鼠标、键盘两个输入设备。因而我们可以通过监听相应的输入事件有无触发，来判断用户是否在操作网页。

监听鼠标移动事件mousemove；
监听键盘按下事件mousedown；
在用户进入网页后，设置延时跳转，如果触发以上事件，则移除延时器，并重新开始。

3. 简易实现

以下代码，简易实现了一个判断失活的方法。

js 复制代码

const pageDeactivated = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };

  const onStartTimer = () => {
    onClearTimer();
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };

  const onStartDeactivated = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
  };

  const onStopDeactivated = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
  };

  if (immediate) {
    onStartDeactivated();
  }

  return {
    onStartDeactivated,
    onStopDeactivated,
    onClearTimer
  };
};

也许你注意到了，我并没有针对onStartTimer事件进行防抖，这是不是会对性能有影响呢？

是的，肯定有那么点影响，那我为啥不添加防抖呢？

这是因为添加防抖后，形成了setTimeout嵌套，造成了clearTimeout(pageTimer)方法执行失败，即添加防抖后不能正常清除延时器，其次嵌套setTimeout也会有精度问题（参考）。

或许你会说，非活动标签页（网页被隐藏）的setTimeout的执行和精度会有问题（参考非活动标签的超时）。

确实有以上问题，那就让我们来尝试解决吧！

3. 完整实现

3.1 处理频繁触发问题

我们可以通过添加一个变量记录开始执行时间，当下一次执行与当前的时间间隔小于某个值时直接退出函数，从而解决这个问题。

js 复制代码

const pageDeactivated = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  // 记录开始时间
  let beginTime = 0;
  const onStartTimer = () => {
    // 触发间隔小于100ms时，直接返回
    const currentTime = Date.now();
    if (pageTimer && currentTime - beginTime < 100) {
      return;
    }

    onClearTimer();
    // 更新开始时间
    beginTime = currentTime;
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };
  
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };
  const onStartDeactivated = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
  };
  const onStopDeactivated = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
  };
  if (immediate) {
    onStartDeactivated();
  }

  return {
    onStartDeactivated,
    onStopDeactivated,
    onClearTimer
  };
};

3.2 处理页面隐藏情况

通过监听visibilitychange事件，在页面隐藏时移除延时器，在页面显示时继续（隐藏时间也可以不计算在内）计时，从而解决这个问题。

js 复制代码

/**
 * 页面失活(无操作)
 * @param {() => void} callback 页面一定时长无操作时触发
 * @param {number} [timeout=15] 时长，默认15s，单位：秒
 * @param {boolean} [immediate=false] 是否立即开始，默认 false
 * @returns
 */
const pageDeactivated = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  let beginTime = 0;

  /**
   * 移除当前延时器，用户后续操作会重新开始计时
   */
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };

  const onStartTimer = () => {
    const currentTime = Date.now();
    if (pageTimer && currentTime - beginTime < 100) {
      return;
    }

    onClearTimer();
    beginTime = currentTime;
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };

   const onPageVisibility = () => {
     // 页面显示状态改变时，移除延时器
     onClearTimer();

     if (document.visibilityState === 'visible') {
       const currentTime = Date.now();
       // 页面显示时，计算时间，如果超出限制时间则直接执行回调函数
       if (currentTime - beginTime >= timeout * 1000) {
         callback();
         return;
       }
       // 继续计时
       pageTimer = setTimeout(() => {
         callback();
       }, timeout * 1000 - (currentTime - beginTime));
     }
   };

  const onStartDeactivated = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
    document.addEventListener('visibilitychange', onPageVisibility);
  };

  const onStopDeactivated = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
    document.removeEventListener('visibilitychange', onPageVisibility);
  };

  if (immediate) {
    onStartDeactivated();
  }

  return {
    onStartDeactivated,
    onStopDeactivated,
    onClearTimer
  };
};

以上代码就是使用js判断用户长时间没有操作网页的完整方法了。