如何修复javascript keydown中的延迟

How to fix delay in javascript keydown

本文关键字：延迟 keydown 何修复 javascript      更新时间：2023-09-26

可能重复：
JavaScript移动延迟和多次按键

我是新手，正在学习HTML5画布和javascript。我创建了一个向左和向右移动对象的事件，我的问题是每当你按住键或切换到另一个键时都会出现延迟。我知道下面的代码不见了，请帮帮我。提前谢谢。

c.addEventListener('keydown',this.check,true);
  function check(el) {
    var code = el.keyCode || el.which;
    if (code == 37 || code == 65){
    x -=1;
    }
    if (code == 39 || code == 68){
    x += 1;
    }
  el.preventDefault();
}

与其试图直接对keydown事件做出反应，我建议您使用keydown和keyup事件来维护当前已关闭的键的列表。然后实现一个"游戏循环"，每x毫秒检查一次哪些键按下，并相应地更新显示。

var keyState = {};    
window.addEventListener('keydown',function(e){
    keyState[e.keyCode || e.which] = true;
},true);    
window.addEventListener('keyup',function(e){
    keyState[e.keyCode || e.which] = false;
},true);
x = 100;
function gameLoop() {
    if (keyState[37] || keyState[65]){
        x -= 1;
    }    
    if (keyState[39] || keyState[68]){
        x += 1;
    }
    // redraw/reposition your object here
    // also redraw/animate any objects not controlled by the user
    setTimeout(gameLoop, 10);
}    
gameLoop();

你会注意到，这可以让你同时处理多个键，例如，如果用户同时按下向左和向上箭头，那么当按下一个键时，后续键按下事件之间的延迟问题就会消失，因为你真正关心的只是是否发生了键按下。

我意识到你可能没有实现一个游戏，但这个"游戏循环"概念应该适用于你，如这个非常简单的演示所示：http://jsfiddle.net/nnnnnn/gedk6/

相关文章：