要实现手柄震动与DOM交互严格同步，需在requestAnimationFrame同一帧内调度震动与UI更新；检测GamepadHapticActuator支持，按操作语义配置参数，并在交互中断时调用cancel()终止震动。
要让手柄震动和网页上的 DOM 交互（比如点击按钮、触发动画）严格同步，关键不是“等事件发生再震动”，而是把震动当作 DOM 操作流程中的一环来调度——即在用户操作触发的同一帧内完成震动指令提交。
确认浏览器与手柄支持振动能力
并非所有手柄或浏览器都开放 GamepadHapticActuator 接口。需在连接时主动检测：
- 监听
gamepadconnected事件后，检查gamepad.hapticActuators?.length > 0 - 若为
dual-rumble类型，通常支持强度可调的左右马达；若为simple-vibration，仅支持基础启停 - 部分 Chromium 内核浏览器（如 Edge 120+、Chrome 122+）已默认启用，但 Safari 和旧版 Firefox 仍不支持
在 requestAnimationFrame 中触发震动，对齐渲染帧
DOM 更新（如 class 切换、CSS 动画开始）和震动指令必须落在同一个渲染帧，否则会出现“先看到反馈、后感到震动”或反之的脱节感。推荐写法：
- 在按钮
click或pointerdown回调中，不直接调用playEffect()，而是标记一个待执行震动任务 - 使用
requestAnimationFrame统一调度：在下一帧中同时执行 DOM 状态更新（如添加active类）和震动播放 - 示例逻辑：
<!-- button 元素已绑定 click -->button.addEventListener('click', () => {<br> pendingHaptic = { pad: currentPad, effect: 'dual-rumble', strong: 0.7, weak: 0.3, duration: 120 };<br> requestAnimationFrame(executeHapticAndUI);<br> });
构造与 DOM 事件语义匹配的震动参数
震动不是越强越好，而应反映操作类型。例如：
- 普通按钮点击：短促单次（
duration: 60ms，strong: 0.2），模拟轻按实体键 - 确认/删除类操作：中等强度双脉冲（
[0, 80, 30, 80]），强化决策感 - 游戏内技能释放：根据技能冷却时间动态调整持续时长，避免与 UI 动画冲突
- 注意：Web Gamepad API 的
playEffect不接受自定义波形数组，只能用预设类型（dual-rumble或trigger-rumble），因此需靠 duration + 强度组合表达意图
处理 DOM 交互中断时的震动终止
用户可能在震动中途取消操作（如鼠标移出按钮、触摸中断），此时需主动停止震动以避免残留感：
- 为每个震动任务生成唯一 ID，并保存其
Promise引用 - 监听
pointerup/pointercancel/blur等退出事件，调用cancel()方法终止对应震动 - 特别注意：若使用
playEffect('dual-rumble', { duration })，即使未到时长，cancel()也能立即停止，无需等待
