本文详解如何通过 KeyboardEvent.repeat 和有限状态机（FSM）实现对空格键“按下→释放→再按下”循环行为的精准控制，适用于计时器、游戏交互等需区分单次按键事件的场景。
本文详解如何通过 `keyboardevent.repeat` 和有限状态机（fsm）实现对空格键“按下→释放→再按下”循环行为的精准控制，适用于计时器、游戏交互等需区分单次按键事件的场景。
在构建魔方计时器（cubing timer）等实时交互应用时，仅监听 keydown/keyup 事件往往不够——浏览器会在长按期间持续触发 keydown，导致重复响应；而直接依赖全局布尔变量（如 down = true/false）又难以准确建模“等待→启动→暂停→重置”的多阶段逻辑。
核心挑战在于：必须严格区分「首次按下」「释放」「再次按下」三个离散事件，且整个流程可无限循环。解决方案是采用有限状态机（Finite State Machine, FSM）+ 原生事件防重机制，而非简单标志位。
✅ 关键技术点
- 禁用重复触发：使用 event.repeat 属性（MDN 文档）过滤长按产生的冗余 keydown；
- 弃用 window.event：现代写法应使用事件处理器的参数 event，避免兼容性与安全性问题；
- 状态驱动逻辑：定义清晰的状态（如 ‘stopped’ / ‘waiting’ / ‘started’），每次有效按键仅触发一次状态迁移，并执行对应动作。
? 推荐实现（状态机版）
let state = 'stopped'; // 初始状态：计时器未启动 // 定义各状态切换时要执行的业务逻辑 const transitions = { waiting: () => { document.body.style.backgroundColor = 'green'; console.log('✅ 进入等待状态：松开空格键即可开始计时'); }, started: () => { document.body.style.backgroundColor = ''; console.log('▶️ 计时开始运行'); // 此处启动你的计时器逻辑（如 setInterval） }, stopped: () => { document.body.style.backgroundColor = 'red'; console.log('⏹️ 计时已暂停'); // 此处停止计时器（如 clearInterval） } }; document.addEventListener('keydown', handleKey); document.addEventListener('keyup', handleKey); function handleKey(event) { // 仅响应空格键，且排除长按重复触发 if (event.code !== 'Space' || event.repeat) return; const actions = { keydown: () => { // 按下时：stopped → waiting；waiting 或 started → stopped（即暂停） return state === 'stopped' ? 'waiting' : 'stopped'; }, keyup: () => { // 释放时：waiting → started；started 或 stopped → 保持原状态（不变更） return state === 'waiting' ? 'started' : state; } }; const next = actions[event.type](); if (next !== state) { state = next; transitions[state](); // 执行对应状态的动作 } }⚠️ 注意事项与最佳实践
- 不要用 keyCode 或 which：已废弃，统一使用 code（如 ‘Space’）或语义化更强的 key（如 ‘ ‘）；
- 避免副作用耦合：transitions 对象将 ui 反馈、日志、计时器启停等逻辑解耦，便于测试与扩展；
- 可扩展性设计：若后续需支持 Enter 键复位、Esc 清零等，只需在 actions 中新增分支，无需重构主干；
- 移动端适配提示：keydown/keyup 在部分移动浏览器中不可靠，如需跨端支持，建议结合 touchstart/touchend 或专用库（如 use-keyboard）。
通过该模式，你获得的不再是一组脆弱的 if-else 标志判断，而是一个健壮、可维护、符合人机交互直觉的状态流转系统——每一次空格操作都精准映射到一个明确的用户意图，真正实现“按一下启动，再按一下暂停，循环往复”的专业级体验。