JavaScript键盘事件延迟与响应式输入处理

理解 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);

运行上述代码并按住一个键（例如右箭头键），控制台输出可能会显示如下类似的时间间隔：

其中，第一个 delta time 较大的值（142129ms）是相对于 lastPress 初始值（通常为0）的，这本身不是问题。但关键在于第二个 delta time (492ms) 与后续事件的间隔 (82-87ms) 之间存在显著差异。这个约 500ms 的延迟是操作系统和浏览器为了区分用户是“短暂按下”还是“长按”而引入的，它模拟了文本输入时光标重复移动的体验。对于文本输入而言，这种机制是合理的，但对于需要即时响应的实时游戏或应用来说，这种初始延迟会导致输入不连贯和体验不佳。

为什么会出现这种延迟？

这种延迟并非 JavaScript 本身的问题，而是源于操作系统和浏览器层面的按键重复（key repeat）机制设计。当一个键被按下时：

立即学习“Java免费学习笔记（深入）”；

钉钉 AI 助理

钉钉AI助理汇集了钉钉AI产品能力，帮助企业迈入智能新时代。

21

查看详情

1. 首先触发一个 keydown 事件。
2. 如果用户继续按住该键，系统会等待一个初始延迟（通常在 200-500ms 之间，取决于操作系统设置）。
3. 延迟结束后，系统会以一个更快的、固定的重复频率（通常在 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();

工作原理

1. keydownHandler: 当用户按下任意键时，此函数会被调用。它会检查 currentKeys 数组，如果当前按下的键的 keyCode 不在数组中，则将其添加到数组中。这意味着无论用户按住键多久，该键的 keyCode 都只会被添加到 currentKeys 数组一次。
2. keyupHandler: 当用户释放任意键时，此函数会被调用。它会找到并移除 currentKeys 数组中对应的 keyCode。
3. 游戏更新循环: 在游戏或应用的每一帧更新时，您可以遍历 currentKeys 数组，或者使用 findKey 函数来检查特定键是否当前处于按下状态。这样，您可以根据实际的按键状态（而不是 keydown 事件的触发频率）来控制角色的移动、动作等。

优势与注意事项

• 消除延迟: 这种方法完全规避了 keydown 事件的初始重复延迟，因为我们不再依赖 keydown 事件的重复触发来判断按键是否持续按下，而是依赖于 currentKeys 数组中键的存在状态。
• 多键输入: 能够轻松处理多个键同时按下的情况，例如在游戏中同时按下“前进”和“跳跃”键。
• 精确控制: 提供了对输入状态的精确控制，使游戏或应用能够以固定的帧率（例如 requestAnimationFrame）来响应输入，而不是受限于操作系统的按键重复率。
• 性能: indexOf 和 splice 操作在小数组中性能良好。如果需要处理大量键，可以考虑使用 Set 或 Map 来优化查找和删除操作。
• 阻止默认行为: 在 keydownHandler 中，根据需要，可以调用 event.preventDefault() 来阻止浏览器对某些按键的默认行为（如空格键的滚动、方向键的页面滚动等），确保游戏或应用的输入控制不受干扰。

总结

对于需要高响应性和精确控制的交互式应用，尤其是游戏，直接依赖 keydown 事件的自动重复机制会因其固有的初始延迟而导致体验不佳。通过结合 keydown 和 keyup 事件来维护一个实时的按键状态列表，并在应用的主循环中查询这个列表，可以有效地消除延迟，实现流畅、多键支持且高度可控的输入处理。这种模式是构建专业级 Web 游戏和交互式工具的推荐方法。

以上就是JavaScript键盘事件延迟与响应式输入处理的详细内容，更多请关注php中文网其它相关文章！