本文介绍如何通过键盘事件与有限状态机（fsm）精准识别空格键的“首次按下”“释放”“再次按下”三个关键动作，实现计时器在等待、运行、暂停三态间循环切换，避免重复触发。
在开发魔方计时器（cubing timer）等需要高精度按键响应的交互应用时，仅依赖 keydown/keyup 基础事件容易误判——例如长按后快速连按会触发多次 keydown（因浏览器默认开启 repeat），导致状态错乱。正确解法是：结合 event.repeat 过滤重复事件，并用有限状态机显式管理状态流转。
核心思路：三态循环 + 事件驱动
我们定义三个互斥状态：
- 'stopped'：初始态，计时器未启动（显示灰色或重置状态）
- 'waiting'：空格首次按下（不松开），进入预备态（UI 变绿，提示“Ready”）
- 'started'：空格释放后进入运行态（计时开始）；再次按下空格则切回 'stopped'（暂停并保持当前时间）
状态切换仅响应非重复的、正确的事件类型（keydown 或 keyup），确保每次物理按键操作只触发一次状态变更。
完整可运行代码示例
let state = 'stopped';
// 各状态对应的业务逻辑（替换为你的计时器操作）
const transitions = {
waiting: () => {
document.body.style.backgroundColor = 'lightgreen';
console.log('✅ Ready — hold space to start');
},
started: () => {
document.body.style.backgroundColor = 'lightblue';
console.log('▶️ Timer running...');
// ? 此处启动你的计时逻辑（如 setInterval）
},
stopped: () => {
document.body.style.backgroundColor = '';
console.log('⏸️ Timer paused');
// ? 此处暂停计时器并保留当前时间
}
};
document.addEventListener('keydown', handleKey);
document.addEventListener('keyup', handleKey);
function handleKey({ code, repeat, type: action }) {
// 仅响应空格键 & 非重复事件（过滤长按产生的多余 keydown）
if (code !== 'Space' || repeat) return;
// 定义状态迁移规则：根据当前状态 + 当前事件类型，决定下一状态
const nextStateMap = {
keydown: {
stopped: 'waiting', // 按下 → 从停止进入等待
waiting: 'stopped', // （理论上不应发生，但防误触）
started: 'stopped' // 按下 → 从运行进入暂停
},
keyup: {
stopped: 'stopped', // 释放停止态无意义
waiting: 'started', // 释放等待态 → 开始计时
started: 'started' // 释放运行态仍为运行（保持）
}
};
const next = nextStateMap[action][state];
if (next && next !== state) {
state = next;
transitions[state](); // 执行对应状态的业务逻辑
}
}关键注意事项
- ✅ 必须检查 event.repeat === false：这是区分“首次按下”和“长按重复触发”的唯一可靠方式，window.event 已废弃，务必使用事件参数解构。
- ✅ 状态迁移表（nextStateMap）比 if/else 更健壮：便于后期扩展（如增加“复位”快捷键）且逻辑一目了然。
- ⚠️ 避免在 keydown 中直接启动计时器：应将“启动”逻辑放在 keyup 触发的 'started' 状态中，符合用户直觉（松开才开始计时）。
- ? 循环闭环已内置：stopped → waiting → started → stopped 形成完整环路，支持无限次重复操作。
通过该方案，你将获得一个响应精准、可维护性强、符合人机交互习惯的计时器控制逻辑——无论是魔方计时、反应测试，还是其他需要多阶段按键控制的场景，均可直接复用此状态机模型。
立即学习“Java免费学习笔记（深入）”；
