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

最新推荐文章于 2025-07-16 16:58:26 发布

LiuPing_Xie

最新推荐文章于 2025-07-16 16:58:26 发布

阅读量2.3k

点赞数 11

CC 4.0 BY-SA版权

分类专栏：前端小知识文章标签：前端 javascript

本文链接：https://blog.csdn.net/qq_36877763/article/details/136877327

1. 背景

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

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

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

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

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

3. 简易实现

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

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