为何键盘keydown事件首次与二次触发间隔差异巨大？

我在为一款小型JavaScript游戏编写输入控制函数时，发现按住按键时，首次触发keydown事件后，第二次触发的延迟明显比后续事件之间的间隔大很多。

示例代码如下：

let lastPress = 0;

const keydownHandler = (event) => {
  console.log(event.keyCode + ', delta time: ' + (Date.now() - lastPress));
  lastPress = Date.now();
}

document.addEventListener("keydown", keydownHandler, false);

按住右键（keyCode 39）运行代码，得到如下输出：

第一个大的delta值是初始调用的差值，我疑惑的是492ms与后续82-87ms的显著差距。请问该间隔差异巨大的原因是什么？是否有缩小该间隔的方法？

原因分析 #

这个差异是操作系统的按键重复机制导致的。系统默认会在第一次按键按下后，等待一段较长的“重复延迟”（也就是你看到的492ms左右），用来区分用户是“单次按键”还是“长按连续输入”。只有过了这段延迟后，才会以固定的短间隔（后续的82-87ms）重复触发keydown事件。这个延迟时长和重复间隔是系统键盘设置里的可配置参数，不同系统默认值不同。

解决方法 #

如果要在游戏中消除这个延迟，不能依赖原生的keydown重复事件，必须自己实现按键状态跟踪+游戏循环检测：

• 用keydown事件记录按键的按下状态，keyup事件重置状态；
• 使用requestAnimationFrame创建游戏主循环，在循环中持续检测按键状态，一旦检测到按键处于按下状态，就执行对应的游戏逻辑。

改进后的示例代码：

// 存储当前按下的按键状态
const keysDown = {};

// 监听按键按下，记录状态
document.addEventListener('keydown', (event) => {
  keysDown[event.keyCode] = true;
});

// 监听按键抬起，清除状态
document.addEventListener('keyup', (event) => {
  delete keysDown[event.keyCode];
});

// 游戏主循环
function gameLoop() {
  // 检测右键是否持续按下
  if (keysDown[39]) {
    console.log('右键持续按下，执行游戏操作');
    // 这里写入你的游戏逻辑，比如角色移动、射击等
  }
  
  // 持续调用循环
  requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

这种方式完全绕开了系统的按键重复机制，能实现无延迟的连续输入响应，更适合游戏场景的控制需求。

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