addEventListener 与 requestAnimationFrame

Question

我正在使用 window.requestAnimationFrame 创建游戏循环。

一切正常，但当我尝试添加事件侦听器时，它会以非常快的速度触发数百次。

我试过使用闭包，但似乎不起作用。

game.update = function(){
   //code that runs every frame
   window.addEventListener('keydown', function(){
      console.log("message");
   },false);
}

我想在 keydown 事件上调用函数 ONCE 而不是多次。

Answer 1

仅当添加 new 侦听器时才添加事件侦听器。多次添加 same 侦听器无效 by design.

将您的侦听器函数移出您分配给 game.update 的函数，这样就不会在您每次调用时都创建一个新的侦听器副本 addEventListener():

var updateListener = function() {
    console.log('message');
};

game.update = function() {
    //code that runs every frame
    window.addEventListener('keydown', updateListener, false);
};

Answer 2

也许有点晚了，但这对我来说不太有意义。不应在 RAF 内添加侦听器。如果你把它放在外面，并将处理程序的结果分配给一个变量，然后让 RAF 获取结果并清除变量，你将获得更快和更好的 stable/predictable 性能。这对于类似的任务来说非常明显，例如在移动设备上使用设备方向侦听器进行控制器输入。事件不需要循环。设置一次，每按下一个键它就会触发一次。 RAF 应该只用于更新图形。任何其他逻辑都应该在它之外。例如，运动和游戏机制应该在一个 setInterval 中，将它们的结果指向外部但 RAF 可以访问的变量和对象。 RAF 应该只选择新的位置值并设置转换。然后运行更流畅，'time'不会加速或减速，并且在不同的设备上保持一致，无论帧率如何。

addEventListener 与 requestAnimationFrame

addEventListener with requestAnimationFrame

javascript

addeventlistener

requestanimationframe

game-loop