JS实现按Enter键切换空格键可用状态功能异常排查

需求说明 #

需要实现的交互规则：

• 默认状态下空格键处于禁用状态
• 每按下一次Enter键，切换一次空格键的可用状态
• 按Enter启用空格后，再次按Enter重新禁用空格，循环触发

原有代码问题排查 #

原有两版代码未实现预期效果，核心问题有3个：

• 第一版代码错误使用赋值运算符=做条件判断，且在条件块内用let重复声明同名局部变量，导致全局的状态标记始终没有被正确修改
• 第二版修正了判断符号和变量声明问题，但仅在状态为禁用时给window.onkeydown绑定了拦截空格的逻辑，状态切为启用时没有重置这个拦截规则，导致空格键一直被拦截无法使用
• 拆分了两个独立的keypress监听处理Enter逻辑，代码冗余，且延迟回调的闭包取值容易出现状态不一致的问题

修复后可用代码 #

// 状态标记：true=空格可用，false=空格禁用，默认禁用
let spaceEnabled = false;

document.addEventListener('keydown', function(event) {
  // 检测到Enter键按下时，延迟500ms切换空格状态
  if (event.keyCode === 13) {
    setTimeout(() => {
      spaceEnabled = !spaceEnabled;
    }, 500);
  }

  // 检测到空格键按下时，根据当前状态判断是否拦截
  if (event.keyCode === 32) {
    if (!spaceEnabled) {
      event.preventDefault();
      return false;
    }
  }
});

实现逻辑说明 #

• 直接用布尔值存储开关状态，不需要用字符串形式的"true"/"false"，从根源避免类型判断错误
• 将Enter状态切换、空格拦截逻辑合并到同一个键盘监听回调中，避免多事件监听导致的状态不同步
• 每次触发空格按键时实时读取当前开关状态判断是否拦截，不需要反复绑定、解绑全局keydown事件，逻辑更稳定，也不会覆盖页面上其他已绑定的键盘事件
• 用!取反运算符直接切换布尔状态，替代冗余的if/else分支判断
• 拦截空格时调用event.preventDefault()阻止当前按键的默认行为，比重写全局window.onkeydown的可控性更强

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