Realtek/doc/buttonClickHandler.js

// 按钮短按检测与处理示例
// 本代码展示如何实现短按1下、短按2下和短按10下的检测与处理逻辑

class ButtonClickHandler {
  constructor() {
    // 配置参数
    this.clickTimeout = 300; // 点击间隔超时时间(毫秒)，超过此时间认为是新的点击序列
    this.longPressThreshold = 600; // 长按判断阈值(毫秒)
    
    // 状态变量
    this.clickCount = 0; // 当前点击序列的点击次数
    this.lastClickTime = 0; // 上次点击时间戳
    this.isLongPress = false; // 是否为长按
    this.isPressed = false; // 按钮是否处于按下状态
    this.clickTimer = null; // 点击定时器
    this.longPressTimer = null; // 长按定时器
    
    // 绑定事件
    this.setupEventListeners();
  }

  setupEventListeners() {
    // 这里模拟按钮事件监听，实际使用时替换为真实的DOM事件
    console.log('按钮点击处理器已初始化，请使用模拟函数测试: simulateButtonDown(), simulateButtonUp()');
  }

  // 模拟按钮按下事件
  onButtonDown() {
    this.isPressed = true; // 设置按钮按下状态
    console.log('按钮按下');
    
    // 重置长按标志
    this.isLongPress = false;
    
    // 启动长按检测定时器
    this.longPressTimer = setTimeout(() => {
      this.isLongPress = true;
      console.log('检测到长按');
      this.handleLongPress();
    }, this.longPressThreshold);
  }

  // 模拟按钮释放事件
  onButtonUp() {
    // 只有在按钮确实被按下的情况下才处理释放事件
    if (!this.isPressed) {
      console.log('警告: 检测到无效的按钮释放事件');
      return;
    }
    
    this.isPressed = false; // 重置按钮按下状态
    console.log('按钮释放');
    
    // 清除长按定时器
    if (this.longPressTimer) {
      clearTimeout(this.longPressTimer);
      this.longPressTimer = null;
    }
    
    // 如果不是长按，则处理短按
    if (!this.isLongPress) {
      this.handleShortPress();
    }
  }

  // 处理短按
  handleShortPress() {
    const currentTime = Date.now();
    const timeSinceLastClick = currentTime - this.lastClickTime;
    
    // 判断是否为新的点击序列（两次点击间隔超过阈值）
    if (timeSinceLastClick > this.clickTimeout) {
      // 重置点击计数
      this.clickCount = 1;
    } else {
      // 增加点击计数
      this.clickCount++;
    }
    
    // 更新上次点击时间
    this.lastClickTime = currentTime;
    
    // 清除之前的定时器
    if (this.clickTimer) {
      clearTimeout(this.clickTimer);
    }
    
    // 启动新的定时器，超时后处理点击序列
    this.clickTimer = setTimeout(() => {
      this.processClickSequence();
    }, this.clickTimeout);
  }

  // 处理长按
  handleLongPress() {
    console.log('执行长按操作');
    // 可以在这里添加长按的具体处理逻辑
  }

  // 处理点击序列
  processClickSequence() {
    console.log(`检测到 ${this.clickCount} 次短按`);
    
    // 根据点击次数执行不同的操作
    switch (this.clickCount) {
      case 1:
        this.handleSingleClick();
        break;
      case 2:
        this.handleDoubleClick();
        break;
      case 10:
        this.handleTenClicks();
        break;
      default:
        if (this.clickCount > 2 && this.clickCount < 10) {
          console.log(`检测到 ${this.clickCount} 次短按，但没有特定处理逻辑`);
        } else if (this.clickCount > 10) {
          console.log(`检测到 ${this.clickCount} 次短按，次数过多`);
        }
    }
    
    // 重置点击计数
    this.clickCount = 0;
  }

  // 处理单击
  handleSingleClick() {
    console.log('执行单击操作 - 短按1下');
    // 这里添加单击的具体逻辑
  }

  // 处理双击
  handleDoubleClick() {
    console.log('执行双击操作 - 短按2下');
    // 这里添加双击的具体逻辑
  }

  // 处理十连击
  handleTenClicks() {
    console.log('执行十连击操作 - 短按10下');
    // 这里添加十连击的具体逻辑
  }

  // 模拟测试函数
  simulateButtonDown() {
    this.onButtonDown();
  }

  simulateButtonUp() {
    this.onButtonUp();
  }

  // 模拟单次点击
  simulateSingleClick() {
    this.simulateButtonDown();
    setTimeout(() => this.simulateButtonUp(), 100);
  }

  // 模拟双击
  simulateDoubleClick() {
    this.simulateSingleClick();
    setTimeout(() => this.simulateSingleClick(), 150); // 两次点击间隔小于clickTimeout
  }

  // 模拟十连击
  simulateTenClicks() {
    for (let i = 0; i < 10; i++) {
      setTimeout(() => this.simulateSingleClick(), i * 150);
    }
  }
}

// 测试代码
console.log('短按检测系统演示');
const buttonHandler = new ButtonClickHandler();

// 导出处理器实例供外部使用
module.exports = buttonHandler;