17370845950

本文介绍如何通过键盘事件与有限状态机（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 形成完整环路，支持无限次重复操作。

通过该方案，你将获得一个响应精准、可维护性强、符合人机交互习惯的计时器控制逻辑——无论是魔方计时、反应测试，还是其他需要多阶段按键控制的场景，均可直接复用此状态机模型。