不同性能CPU设备长按按键时Element:keydown事件触发次数是否一致

核心结论：高性能和低性能CPU设备上，长按2秒按键时绑定的keydown回调执行次数并不一致，不同系统下keydown的触发次数也没有统一标准，具体原因如下：

• keydown的重复触发机制由操作系统的键盘配置决定，和CPU性能没有直接绑定关系。不同操作系统的默认按键重复速率、首次重复延迟都有区别：Windows默认按键重复速率约为每秒25-30次，macOS默认约为每秒10-15次，同时用户可以手动调整重复速率、甚至完全关闭按键重复，这些配置差异都会直接影响keydown事件的理论触发次数。
• 就算系统层面的触发频率一致，实际回调的执行次数还会受浏览器主线程占用情况影响。低性能设备运行时更容易出现页面逻辑阻塞、渲染掉帧的情况，触发的keydown事件会在事件队列里排队等待，最终实际执行的回调次数会比理论触发次数少。

Canvas键盘控制移动的跨设备一致实现方案 #

如果直接在keydown回调里累加对象移动距离，必然会出现不同设备/系统下移动速度不一致的问题，正确的实现逻辑完全不需要依赖keydown的重复触发频率，实现步骤如下：

• 单独维护一个存储当前按下按键的状态集合，只在keydown第一次触发时把对应键值存入集合，拦截后续的重复keydown事件
• 监听keyup事件，按键抬起时把对应键值从集合中移除
• 用requestAnimationFrame跑独立的渲染循环，每帧计算当前帧和上一帧的时间差（deltaTime），结合当前按下的按键状态，按照预设的移动速度（单位：像素/秒）乘以时间差计算单帧位移，更新对象位置后重绘画布

最简实现代码参考：

const canvas = document.querySelector('canvas')
const ctx = canvas.getContext('2d')
// 移动对象配置，speed为每秒移动的像素值
const player = { x: 100, y: 100, size: 20, speed: 220 }
const pressedKeys = new Set()
let lastFrameTime = 0

// 绑定按键状态监听
window.addEventListener('keydown', (e) => {
  if (['ArrowUp', 'ArrowDown', 'ArrowLeft', 'ArrowRight'].includes(e.key)) {
    e.preventDefault() // 阻止方向键触发页面默认滚动
  }
  pressedKeys.add(e.key)
})
window.addEventListener('keyup', (e) => {
  pressedKeys.delete(e.key)
})

// 渲染主循环
function animate(timestamp) {
  // 计算两帧之间的时间差，单位转换为秒
  const delta = (timestamp - lastFrameTime) / 1000
  lastFrameTime = timestamp

  // 清空画布
  ctx.clearRect(0, 0, canvas.width, canvas.height)

  // 按时间差计算位移，不受事件触发频率、掉帧影响
  let moveX = 0, moveY = 0
  if (pressedKeys.has('ArrowUp')) moveY -= player.speed * delta
  if (pressedKeys.has('ArrowDown')) moveY += player.speed * delta
  if (pressedKeys.has('ArrowLeft')) moveX -= player.speed * delta
  if (pressedKeys.has('ArrowRight')) moveX += player.speed * delta

  player.x += moveX
  player.y += moveY

  // 绘制移动对象
  ctx.fillRect(player.x, player.y, player.size, player.size)
  requestAnimationFrame(animate)
}
// 启动渲染循环
requestAnimationFrame(animate)

这套实现的移动速度完全由预设的speed值和实际经过的时间决定，不管用户的系统按键重复率是多少、设备性能高低是否掉帧，长按时对象的移动速度都能保持一致——如果设备掉帧，单帧的delta值会对应变大，单帧移动距离同步增加，整体每秒的移动距离始终和预设值对齐。

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