使用JavaScript实现检测网页是否为空闲状态

更新时间：2024年03月28日 11:14:40 作者：求知若饥

最近开发项目时,常碰到“用户在一定时间内无任何操作时,跳转到某个页面”的需求,所以本文就来使用JavaScript实现这一要求,需要的可以参考下

1. 背景

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

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

2. 如何判断页面是否空闲(用户长时间无操作)

首先，我们要知道什么是空闲？用户一定时间内，没有对网页进行任何操作，则当前网页为空闲状态。

用户操作网页，无非就是通过鼠标、键盘两个输入设备(暂不考虑手柄等设备)。因而我们可以监听相应的输入事件，来判断网页是否空闲(用户是否操作网页)。

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

3. 网页空闲检测实现

3.1 简易实现

以下代码，简易实现了一个判断网页空闲的方法。

const onIdleDetection = (callback, timeout = 15, immediate = false) => {
  let pageTimer;
  
  const onClearTimer = () => {
    pageTimer && clearTimeout(pageTimer);
    pageTimer = undefined;
  };
  const onStartTimer = () => {
    onClearTimer();
    pageTimer = setTimeout(() => {
      callback();
    }, timeout * 1000);
  };

  const startDetection = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
  };
  const stopDetection = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
  };
  const restartDetection = () => {
      onClearTimer();
      onStartTimer();
  };

  if (immediate) {
    startDetection();
  }

  return {
    startDetection,
    stopDetection,
    restartDetection
  };
};

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

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

这是因为添加防抖后，形成了setTimeout嵌套，嵌套setTimeout会有精度问题（参考）。

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

确实存在以上问题，接下来我们就来一一解决吧！

3.2 处理频繁触发问题

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

const onIdleDetection = (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 startDetection = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
  };
  const stopDetection = () => {
    onClearTimer();
    document.removeEventListener('mousedown', onStartTimer);
    document.removeEventListener('mousemove', onStartTimer);
  };
  const restartDetection = () => {
      onClearTimer();
      onStartTimer();
  };
  
  if (immediate) {
    startDetection();
  }

  return {
    startDetection,
    stopDetection,
    restartDetection
  };
};

3.3 处理页面被隐藏的情况(完整实现)

我们可以监听visibilitychange事件，在页面隐藏时移除延时器，然后页面显示时继续计时，从而解决这个问题。

/**
 * 网页空闲检测
 * @param {() => void} callback 空闲时执行，即一定时长无操作时触发
 * @param {number} [timeout=15] 时长，默认15s，单位：秒
 * @param {boolean} [immediate=false] 是否立即开始，默认 false
 * @returns
 */
const onIdleDetection = (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 startDetection = () => {
    onStartTimer();
    document.addEventListener('mousedown', onStartTimer);
    document.addEventListener('mousemove', onStartTimer);
    document.addEventListener('visibilitychange', onPageVisibility);
  };

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

  if (immediate) {
    startDetection();
  }

  return {
    startDetection,
    stopDetection,
    restartDetection
  };
};

通过以上代码，我们就完整地实现了一个网页空闲状态检测的方法。

4. 扩展

chrome浏览器其实提供了一个Idle DetectionAPI，来实现网页空闲状态的检测，但是这个API还是一个实验性特性，并且Firefox与Safari不支持。API参考

到此这篇关于使用JavaScript实现检测网页是否为空闲状态的文章就介绍到这了,更多相关JavaScript检测网页内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

JavaScript作用域全面总结(附详细代码)
JavaScript的作用域一直以来是前端开发中比较难以理解的知识点,下面这篇文章主要介绍了JavaScript作用域全面总结的相关资料,文中通过代码介绍的非常详细,需要的朋友可以参考下
2025-11-11
前端bug调试的方法技巧及常见错误
这篇文章主要介绍了编程中常见的报错和Bug,以及调试的重要性,调试的基本流程是通过缩小范围来定位问题,并给出了推测法、删除代码法、console调试和debugger调试等方法,文中通过图文介绍的非常详细,需要的朋友可以参考下
2025-03-03
Javascript异步表单提交，图片上传，兼容异步模拟ajax技术
使用Javascript异步表单提交，图片上传，兼容异步模拟ajax技术,需要的朋友可以参考下。
2010-05-05
详解如何在JavaScript中使用装饰器
Decorator装饰器是ES7的时候提案的特性，目前处于Stage 3候选阶段（2022年10月）。装饰器简单来说就是修改类和类方法的语法糖，很多面向对象语言都有装饰器这一特性。本文就来说说如何在JavaScript中使用装饰器，需要的可以参考一下
2022-10-10
SOSO地图API使用(一)在地图上画圆实现思路与代码
最近在做SOSO地图相关开发，遇到相关画圆知识，特此简单记录下来,接下来讲解如何在在地图上画圆，感兴趣的朋友可以了解下
2013-01-01
深入理解js A*寻路算法原理与具体实现过程
这篇文章主要介绍了js A*寻路算法原理与具体实现过程,结合实例形式详细分析了A*寻路算法的具体概念、原理、实现方法与相关操作技巧,需要的朋友可以参考下
2018-12-12
Javascript writable特性介绍
这篇文章主要介绍了Javascript writable特性介绍,本文用浅显易懂的语言讲解了writable的特性,需要的朋友可以参考下
2015-02-02
JavaScript继承模式粗探
之前提到了JS中比较简单的设计模式，在各种设计模式中被最常使用的工具之一就是原型链的继承。作为OOP的特质之一——继承，今天主要谈谈JS中比较简单的继承方法
2016-01-01
使用JavaScript italics方法实现文本变斜体教程示例
这篇文章主要为大家介绍了JavaScript italics实现文本变斜体教程示例,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
2023-12-12
JavaScript实现获取两个排序数组的中位数算法示例
这篇文章主要介绍了JavaScript实现获取两个排序数组的中位数算法,涉及javascript数组遍历及数值计算相关操作技巧,需要的朋友可以参考下
2019-02-02