按键之间无延迟

Question

我正在做一个游戏，但遇到了一个问题，因为当按下左键时，角色应该向左移动，而当按下右键时，角色应该向右移动。 这一切正常，但问题是当按下键时，角色会朝相应的方向稍微移动，等待大约半秒钟，直到计算机意识到按下键后，角色才能按照我的意愿移动。 按住键后如何消除延迟？ 这是我移动角色的代码。

 $(document).keydown(function(key) { switch(parseInt(key.which, 10)) { case 37: $('#player').animate({left:'-=5px'}, 1); break; case 39: $('#player').animate({left:'+=5px'}, 1); break; } }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 

Answer 1

如果要以可控制的方式重复键，则必须自己实现，因为触发按键事件取决于操作系统对键应如何重复的想法。 这意味着可能会有可变的初始延迟和跟随延迟，并且一次按住两个键只会导致其中一个重复。

我从接过代码（和报价） 这个答案，并混合了一点你的代码，因此它可以与你的工作#player元素。 请查看该链接中的问题和答案。 我删除了原始注释，以缩短此处发布的代码，但它们非常有用，因此您可以知道自己在做什么。

代码（ jsFiddle ）：

function KeyboardController(keys, repeat) {

    var timers= {};

    document.onkeydown= function(event) {
        var key= (event || window.event).keyCode;
        if (!(key in keys))
            return true;
        if (!(key in timers)) {
            timers[key]= null;
            keys[key]();
            if (repeat!==0)
                timers[key]= setInterval(keys[key], repeat);
        }
        return false;
    };

    document.onkeyup= function(event) {
        var key= (event || window.event).keyCode;
        if (key in timers) {
            if (timers[key]!==null)
                clearInterval(timers[key]);
            delete timers[key];
        }
    };

    window.onblur= function() {
        for (key in timers)
            if (timers[key]!==null)
                clearInterval(timers[key]);
        timers= {};
    };

}

KeyboardController({
    37: function() { $('#player').animate({left:'-=5px'}, 100); },
    39: function() { $('#player').animate({left:'+=5px'}, 100); }
}, 100);

我还根据自己的喜好调整了动画设置和KeyboardController的“ repeat”参数（说实话，有些随机）。 玩这些参数，看看最喜欢什么。