如何解决JavaScript中同时按键延迟问题并实现多键存储？

原代码的核心问题 #

1. 单个key变量只能存储一个按键，完全无法支持多按键同时按下的场景
2. keyup触发时直接清空key，如果前一个按键的keyup事件延迟触发，会导致新按键的显示被打断
3. setInterval(e => {}, Infinity)设置了无限长的执行间隔，定时器根本不会工作，你看到的更新只是keydown事件偶然直接修改DOM的结果

修复方案（新手友好的简单实现） #

我们用对象跟踪每个按键的独立状态，配合requestAnimationFrame（比setInterval更适合游戏类实时更新）来同步显示：

<p>Press and hold keys...</p>
<p id="test"></p>

<script>
// 用对象存储所有按键的按下状态，键名是按键code，值为true/false
const pressedKeys = {};

// 按键按下时标记为激活状态
document.addEventListener('keydown', e => {
  pressedKeys[e.code] = true;
});

// 按键松开时标记为未激活状态
document.addEventListener('keyup', e => {
  pressedKeys[e.code] = false;
});

// 实时更新显示的函数
function updateKeyDisplay() {
  // 筛选出所有正在按下的按键
  const activeKeys = Object.keys(pressedKeys).filter(key => pressedKeys[key]);
  // 更新DOM，无按键时显示提示文本
  document.getElementById('test').innerText = activeKeys.join(', ') || 'No keys pressed';
  // 让浏览器在下一帧继续执行，实现持续实时更新
  requestAnimationFrame(updateKeyDisplay);
}

// 启动更新循环
updateKeyDisplay();
</script>

方案优势 #

• 每个按键状态独立存储，切换按键无干扰，完美支持多按键同时按下
• 不再依赖keyup清空全局变量，彻底避免事件延迟带来的显示问题
• requestAnimationFrame与浏览器渲染节奏同步，更新更流畅无冗余延迟

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