Ionic 3移动端游戏多按钮长按功能异常技术求助

嘿，我来帮你搞定这个问题！看起来你的核心问题是长按多按钮时的事件冲突和定时器管理混乱，导致卡顿和函数无限调用。咱们一步步来修复：

1. 先理清楚核心问题根源 #

• 你可能每次触发press事件时都创建了新的定时器，但没有正确跟踪这些定时器，导致多个定时器同时运行，造成卡顿
• 松开按钮时，没有彻底清理所有相关定时器，或者状态没重置，导致定时器继续触发，甚至交替调用函数
• 按钮的长按状态没有被正确跟踪，无法区分当前哪些按钮处于按住状态

2. 解决方案：统一状态管理 + 定时器单例控制 #

我们需要用一个状态对象跟踪每个按钮的长按状态，同时用单个变量管理定时器，确保启动和停止逻辑清晰。

步骤1：在组件中定义状态和定时器变量 #

import { Component, OnDestroy } from '@angular/core';

@Component({
  selector: 'app-game-controls',
  templateUrl: './game-controls.component.html',
  styleUrls: ['./game-controls.component.scss'],
})
export class GameControlsComponent implements OnDestroy {
  // 跟踪每个按钮的长按状态
  buttonStates = {
    leftArrow: false,
    brake: false
  };
  // 存储定时器ID，方便后续清理
  logTimer: number | null = null;

  // 你的核心日志函数
  logAction(action: string) {
    console.log(`当前动作: ${action}`);
  }

  // 组件销毁时清理定时器，防止内存泄漏
  ngOnDestroy() {
    this.stopLogging();
  }
}

步骤2：编写长按启动和停止的逻辑 #

我们需要在press事件中标记按钮状态，并在状态变化时启动定时器；在pressend或touchend中重置状态，并停止定时器。

// 按钮长按开始时触发
onButtonPress(buttonType: 'leftArrow' | 'brake') {
  this.buttonStates[buttonType] = true;
  // 如果定时器还没启动，就启动它
  if (!this.logTimer) {
    this.startLogging();
  }
}

// 按钮松开时触发
onButtonRelease(buttonType: 'leftArrow' | 'brake') {
  this.buttonStates[buttonType] = false;
  // 检查是否所有按钮都已松开，如果是就停止定时器
  const allButtonsReleased = Object.values(this.buttonStates).every(state => !state);
  if (allButtonsReleased && this.logTimer) {
    this.stopLogging();
  }
}

// 启动日志输出
startLogging() {
  // 用setInterval循环输出，根据当前按住的按钮组合调整输出内容
  this.logTimer = window.setInterval(() => {
    const activeActions = [];
    if (this.buttonStates.leftArrow) activeActions.push('左箭头');
    if (this.buttonStates.brake) activeActions.push('刹车');
    // 如果有活跃动作，就调用日志函数
    if (activeActions.length > 0) {
      this.logAction(activeActions.join(' + '));
    }
  }, 100); // 可调整间隔时间，控制日志输出频率
}

// 停止日志输出
stopLogging() {
  if (this.logTimer) {
    clearInterval(this.logTimer);
    this.logTimer = null;
  }
}

步骤3：在模板中绑定事件 #

确保每个按钮都正确绑定press、pressend和touchend事件（touchend是为了兼容某些触摸设备的边缘情况）：

<ion-button 
  (press)="onButtonPress('leftArrow')"
  (pressend)="onButtonRelease('leftArrow')"
  (touchend)="onButtonRelease('leftArrow')"
>
  左箭头
</ion-button>

<ion-button 
  (press)="onButtonPress('brake')"
  (pressend)="onButtonRelease('brake')"
  (touchend)="onButtonRelease('brake')"
>
  刹车
</ion-button>

3. 关键注意事项 #

• 避免重复创建定时器：每次启动前检查定时器是否存在，防止多个定时器同时运行导致卡顿
• 彻底清理定时器：除了按钮松开时清理，组件销毁时也要执行清理，避免内存泄漏
• 状态同步：确保按钮的按住状态和定时器的启动/停止严格同步，避免出现状态不一致的情况

这样调整后，你按住左箭头再按刹车时，会输出“左箭头 + 刹车”的日志，松开任意一个按钮时如果还有其他按钮按住，会继续输出对应动作，全部松开后就停止日志，不会出现卡顿和无限调用的问题啦！

内容的提问来源于stack exchange，提问作者Filip