js判断用户长时间无操作

原理

// userActivityDetector.ts
class UserActivityDetector {
  private isUserActive: boolean = false;
  private activityTimeout: number;
  private activityTimer: NodeJS.Timeout | null = null;

  constructor(timeout: number = 3000) {
    this.activityTimeout = timeout;
    this.initialize();
  }

  private initialize() {
    // 监听用户的各种事件，例如鼠标移动、键盘输入等
    window.addEventListener("mousemove", this.handleUserActivity);
    window.addEventListener("click", this.handleUserActivity);
    window.addEventListener("scroll", this.handleUserActivity);
    window.addEventListener("keydown", this.handleUserActivity);
    
    // 设置定时器检测用户是否处于活动状态
    this.startActivityTimer();
  }

  private handleUserActivity = () => {
    this.isUserActive = true;
    this.restartActivityTimer();
  };

  private startActivityTimer() {
    this.activityTimer = setTimeout(() => {
      this.isUserActive = false;
    }, this.activityTimeout);
  }

  private restartActivityTimer() {
    if (this.activityTimer) {
      clearTimeout(this.activityTimer);
    }
    this.startActivityTimer();
  }

  // 公开方法，用于外部获取用户活动状态
  public isUserCurrentlyActive(): boolean {
    return this.isUserActive;
  }

  // 销毁方法，在不需要时清除事件监听器
  public destroy() {
    window.removeEventListener("mousemove", this.handleUserActivity);
    window.removeEventListener("keydown", this.handleUserActivity);

    if (this.activityTimer) {
      clearTimeout(this.activityTimer);
    }
  }
}

export default UserActivityDetector;

使用方法

import UserActivityDetector  from "@/utils/userActivityDetector";

const userActivityDetector = new UserActivityDetector();
const isUserActive = userActivityDetector.isUserCurrentlyActive();
console.log(isUserActive )