如何修复javascript keydown的延迟

Question

可能重复:
JavaScript移动延迟和多次击键

我是新手,并使用javascript学习HTML5画布.我创建了一个事件来左右移动一个对象,我的问题是每当你按住键或切换到另一个键时的延迟.我知道下面的代码中缺少请帮助我.先感谢您.

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();
}

Answer 1

我建议您使用keydown和keyup事件来维护当前关闭的键列表,而不是尝试直接对keydown事件做出反应.然后实现一个"游戏循环",每隔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/