理解 keydown 事件的初始延迟
当用户按住一个键盘键时，浏览器会触发一系列 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 | Delta time (ms) |
|---|---|
| 39 | 142129 |
| 39 | 492 |
| 39 | 82 |
| 39 | 87 |
| 39 | 82 |
| ... | ... |
其中，第一个 delta time 较大的值（142129ms）是相对于 lastPress 初始值（通常为0）的，这本身不是问题。但关键在于第二个 delta time (492ms) 与后续事件的间隔 (82-87ms) 之间存在显著差异。这个约 500ms 的延迟是操作系统和浏览器为了区分用户是“短暂按下”还是“长按”而引入的，它模拟了文本输入时光标重复移动的体验。对于文本输入而言，这种机制是合理的，但对于需要即时响应的实时游戏或应用来说，这种初始延迟会导致输入不连贯和体验不佳。
为什么会出现这种延迟？
这种延迟并非 JavaScript 本身的问题，而是源于操作系统和浏览器层面的按键重复（key repeat）机制设计。当一个键被按下时：
立即学习“Java免费学习笔记（深入）”；
- 首先触发一个 keydown 事件。
- 如果用户继续按住该键，系统会等待一个初始延迟（通常在 200-500ms 之间，取决于操作系统设置）。
- 延迟结束后，系统会以一个更快的、固定的重复频率（通常在 50-100ms 之间）持续触发 keydown 事件，直到键被释放。
正是这个“初始延迟”导致了第一次和第二次 keydown 事件之间的时间间隔显著大于后续事件。
解决方案：跟踪按键状态
为了绕过 keydown 事件的固有延迟并实现精确、响应式的输入控制，最佳实践是使用 keydown 和 keyup 事件来维护一个当前所有按下键的列表。这样，应用程序的主循环（例如游戏的渲染/更新循环）就可以在每一帧检查哪些键是按下的，并据此执行相应的动作。
实现按键状态跟踪
我们可以维护一个数组来存储当前所有按下的键的 keyCode 或 code 值。
const currentKeys = []; // 存储当前按下的键的列表
/**
* 检查某个键是否已在 currentKeys 列表中
* @param {number} keyCode - 要查找的键码
* @returns {number} - 键在列表中的索引，如果不存在则返回 -1
*/
const findKey = (keyCode) => {
return currentKeys.indexOf(keyCode);
}
/**
* keydown 事件处理函数
* 当键按下时，如果它不在 currentKeys 列表中，则添加进去。
* 阻止事件的默认行为（如滚动、浏览器快捷键），以确保游戏控制的优先权。
*/
const keydownHandler = (event) => {
if (findKey(event.keyCode) === -1) {
currentKeys.push(event.keyCode);
// 可选：阻止默认行为，防止浏览器响应按键
// event.preventDefault();
}
}
/**
* keyup 事件处理函数
* 当键释放时，将其从 currentKeys 列表中移除。
*/
const keyupHandler = (event) => {
const index = findKey(event.keyCode);
if (index >= 0) {
currentKeys.splice(index, 1);
}
}
// 注册事件监听器
document.addEventListener("keydown", keydownHandler, false);
document.addEventListener("keyup", keyupHandler, false);
// 示例：如何在游戏更新循环中使用
// 假设这是一个游戏的主更新函数，每帧调用
function gameUpdateLoop() {
// 检查是否按下了向右箭头键 (keyCode 39)
if (findKey(39) !== -1) {
console.log("玩家正在向右移动");
// 执行向右移动的逻辑
}
// 检查是否按下了空格键 (keyCode 32)
if (findKey(32) !== -1) {
console.log("玩家正在跳跃");
// 执行跳跃逻辑
}
// 可以在这里处理多键组合，例如同时按下 W 和 Shift
// if (findKey(87) !== -1 && findKey(16) !== -1) {
// console.log("玩家正在疾跑");
// }
requestAnimationFrame(gameUpdateLoop); // 继续下一帧
}
// 启动游戏循环
// gameUpdateLoop();工作原理
- keydownHandler: 当用户按下任意键时，此函数会被调用。它会检查 currentKeys 数组，如果当前按下的键的 keyCode 不在数组中，则将其添加到数组中。这意味着无论用户按住键多久，该键的 keyCode 都只会被添加到 currentKeys 数组一次。
- keyupHandler: 当用户释放任意键时，此函数会被调用。它会找到并移除 currentKeys 数组中对应的 keyCode。
- 游戏更新循环: 在游戏或应用的每一帧更新时，您可以遍历 currentKeys 数组，或者使用 findKey 函数来检查特定键是否当前处于按下状态。这样，您可以根据实际的按键状态（而不是 keydown 事件的触发频率）来控制角色的移动、动作等。
优势与注意事项
- 消除延迟: 这种方法完全规避了 keydown 事件的初始重复延迟，因为我们不再依赖 keydown 事件的重复触发来判断按键是否持续按下，而是依赖于 currentKeys 数组中键的存在状态。
- 多键输入: 能够轻松处理多个键同时按下的情况，例如在游戏中同时按下“前进”和“跳跃”键。
- 精确控制: 提供了对输入状态的精确控制，使游戏或应用能够以固定的帧率（例如 requestAnimationFrame）来响应输入，而不是受限于操作系统的按键重复率。
- 性能: indexOf 和 splice 操作在小数组中性能良好。如果需要处理大量键，可以考虑使用 Set 或 Map 来优化查找和删除操作。
- 阻止默认行为: 在 keydownHandler 中，根据需要，可以调用 event.preventDefault() 来阻止浏览器对某些按键的默认行为（如空格键的滚动、方向键的页面滚动等），确保游戏或应用的输入控制不受干扰。
总结
对于需要高响应性和精确控制的交互式应用，尤其是游戏，直接依赖 keydown 事件的自动重复机制会因其固有的初始延迟而导致体验不佳。通过结合 keydown 和 keyup 事件来维护一个实时的按键状态列表，并在应用的主循环中查询这个列表，可以有效地消除延迟，实现流畅、多键支持且高度可控的输入处理。这种模式是构建专业级 Web 游戏和交互式工具的推荐方法。
