本文介绍如何通过键盘事件与有限状态机（FSM）精准识别空格键的“首次按下”“释放”“再次按下”三个关键动作，实现计时器在“等待→运行→暂停”状态间的无缝循环切换，避免重复触发。
在开发魔方计时器（cubing timer）等交互式计时应用时，仅依赖 keydown/keyup 基础事件极易导致状态错乱——例如长按后快速松开再按，可能因浏览器自动触发 repeat 事件而误判为多次按下。正确解法是结合 event.repeat 属性过滤重复事件，并采用有限状态机（Finite State Machine）建模用户操作流。
✅ 核心逻辑：三态循环模型
我们定义三个互斥状态：
- 'stopped'：初始/暂停态（计时器静止，界面可显示绿色待机提示）
- 'waiting'：按键按下但未释放（视觉反馈：背景变绿）
- 'started'：按键释放后开始计时（计时器运行）
状态迁移规则如下：
- keydown（且非 repeat） + 当前为 'stopped' → 进入 'waiting'
- keyup（且非 repeat） + 当前为 'waiting' → 进入 'started'
- keydown（且非 repeat） + 当前为 'started' → 进入 'stopped'
- 其他情况（如 repeat、非空格键）直接忽略
? 完整可运行代码示例
let state = 'stopped';
// 各状态对应的业务逻辑（替换为你的实际操作）
const transitions = {
waiting: () => {
document.body.style.backgroundColor = 'lightgreen';
console.log('✅ 已进入等待状态（空格已按下）');
},
started: () => {
document.body.style.backgroundColor = '';
console.log('▶️ 计时器已启动');
// 此处启动你的计时逻辑，例如：startTimer()
},
stopped: () => {
document.body.style.backgroundColor = '';
console.log('⏹️ 计时器已暂停');
// 此处暂停计时逻辑，例如：pauseTimer()
}
};
document.addEventListener('keydown', changeState);
document.addEventListener(
'keyup', changeState);
function changeState({ code, repeat, type: action }) {
// 1. 仅响应空格键 & 排除自动重复事件（长按时的连续 keydown）
if (code !== 'Space' || repeat) return;
// 2. 定义状态迁移映射（清晰解耦逻辑）
const actions = {
keydown: () => {
if (state === 'stopped') return 'waiting';
if (state === 'started') return 'stopped';
return state; // waiting → waiting（不变更）
},
keyup: () => {
if (state === 'waiting') return 'started';
return state; // stopped/started → 保持原状
}
};
// 3. 执行迁移：仅当状态改变时更新并触发对应逻辑
const next = actions[action]();
if (next !== state) {
state = next;
transitions[state](); // 调用该状态的处理函数
}
}
'keyup', changeState);
function changeState({ code, repeat, type: action }) {
// 1. 仅响应空格键 & 排除自动重复事件（长按时的连续 keydown）
if (code !== 'Space' || repeat) return;
// 2. 定义状态迁移映射（清晰解耦逻辑）
const actions = {
keydown: () => {
if (state === 'stopped') return 'waiting';
if (state === 'started') return 'stopped';
return state; // waiting → waiting（不变更）
},
keyup: () => {
if (state === 'waiting') return 'started';
return state; // stopped/started → 保持原状
}
};
// 3. 执行迁移：仅当状态改变时更新并触发对应逻辑
const next = actions[action]();
if (next !== state) {
state = next;
transitions[state](); // 调用该状态的处理函数
}
}⚠️ 关键注意事项
- 绝不使用 window.event：现代标准要求事件处理器必须显式接收 Event 参数（如 { code, repeat, type }），window.event 已废弃且不可靠。
- repeat 是核心防线：KeyboardEvent.repeat 在用户长按时为 true，必须过滤，否则一次长按会触发数十次 keydown，彻底破坏状态机。
- 状态变更需显式判断：避免无条件赋值 state = next，务必用 if (next !== state) 检查，防止重复执行副作用（如多次启动计时器）。
- 扩展性设计：若后续需支持其他键（如 Enter 重置），只需扩展 actions 映射和 transitions 对象，无需修改主流程。
通过该方案，你将获得一个健壮、可维护、符合 Web 标准的多阶段按键控制系统，完美支撑魔方计时器等高精度交互场景。
