如何在JavaScript中多次检测空格键按下，实现魔方计时器功能？

核心问题是只用单个布尔值无法区分完整的计时流程阶段，需要通过状态机跟踪当前所处步骤，精准对应你需要的三个状态：

1. 初始状态（idle）：等待第一次按下空格键
2. 准备状态（ready）：按住空格键时，计时器变绿
3. 运行状态（running）：松开空格键后计时启动，等待再次按下停止

以下是修改后的完整代码，完美匹配你的需求且流程可重复：

// 定义三个流程状态：初始等待、已按下准备开始、计时中
let timerState = 'idle';
let startTime;
let timerInterval;

// 示例：更新计时器显示（实际项目中替换为DOM元素操作）
function updateTimerDisplay(elapsed) {
  const seconds = (elapsed / 1000).toFixed(3);
  console.log(`当前计时：${seconds}s`);
  // 比如：document.getElementById('timer').textContent = seconds;
}

document.addEventListener('keydown', function(event) {
  if (event.code !== 'Space') return;
  event.preventDefault(); // 禁用空格默认滚动行为

  switch(timerState) {
    case 'idle':
      // 第一次按下空格：进入准备状态，计时器变绿
      timerState = 'ready';
      console.log('计时器已变绿，松开开始计时');
      // 实际样式修改：document.getElementById('timer').style.backgroundColor = 'green';
      break;
    case 'running':
      // 计时中按下空格：停止计时，回到初始状态
      clearInterval(timerInterval);
      const totalElapsed = Date.now() - startTime;
      updateTimerDisplay(totalElapsed);
      console.log('计时已停止');
      // 恢复样式：document.getElementById('timer').style.backgroundColor = '';
      timerState = 'idle';
      break;
  }
});

document.addEventListener('keyup', function(event) {
  if (event.code !== 'Space') return;
  event.preventDefault();

  if (timerState === 'ready') {
    // 松开空格：启动计时，进入运行状态
    timerState = 'running';
    startTime = Date.now();
    console.log('计时开始');
    // 实时刷新计时显示
    timerInterval = setInterval(() => {
      const elapsed = Date.now() - startTime;
      updateTimerDisplay(elapsed);
    }, 10);
  }
});

关键逻辑说明 #

• 用timerState字符串替代单一布尔值，清晰划分流程阶段，避免重复触发问题
• keydown事件仅处理两种有效场景：初始状态触发准备、运行状态触发停止
• keyup事件仅在准备状态下触发计时启动，其他阶段不响应
• 加入了完整的计时逻辑示例，包含开始、实时刷新、停止的闭环流程

内容的提问来源于stack exchange，提问作者Timur Arazmedov