删除 JavaScript 中的按键延迟？答案

【问题标题】：Remove keydown delay in JavaScript?删除 JavaScript 中的按键延迟？
【发布时间】：2019-05-27 18:43:49
【问题描述】：

好吧，当您按住键盘上的某个键时，第一次开火后会有 1 秒的延迟。
您可以继续打开记事本并按住一个键（例如“x”），您会在第一次火灾后看到有延迟。

但是，我正在尝试使用 JavaScript 在 HTML5 Canvas 中开发游戏，并且 1 秒的延迟非常烦人，此外，它还会停止玩家行走动画..

那么我怎样才能删除 JavaScript 中令人讨厌的延迟（没有 jQuery！）？

我的 keydown 事件在这种模式下工作 -

document.onkeydown = getKey;
function getKey(e) {
    switch(e.keyCode) {
        case 38: // UP
            Player.PositionY--;
        break;
        case 39: // RIGHT
            Player.PositionX++;
        break;
        case 40: // DOWN
            Player.PositionY++;
        break;
        case 37: // LEFT
            Player.PositionX--;
        break;
    }
}

【问题讨论】：

有一个简单的解决方案：不要依赖操作系统重复，滚动您自己的事件循环来轮询您的键盘类（可选：仅当发生某些事情时）。
@JanDvorak 是的，谢谢 :)

标签： javascript html5-canvas dom-events

【解决方案1】：

您可以在keydown 上开始一个活动并在keyup 上停止它

$('#mycanvas').on('keydown', function() { 
   $(document).trigger('start'); 
}); 

$('#mycanvas').on('keyup', function() { 
   $(document).trigger('stop'); 
});

$(document).on('start', startAnimation);
$(document).on('stop', stopAnimation);

function startAnimation(e) { //start something }
function stopAnimation(e) { //stop something }

【讨论】：

它应该如何提供帮助？如果用户将持有一个键 keyup 事件甚至不会触发..
@IsraelG。那么事件 (setInterval) 应该无限期地运行。
不是这个主意吗？你想摆脱延迟，对吧？如果是这种情况，请启动一个将一直运行到 keyup 的事件
为什么需要额外的间接层级？
@JanDvorak OP 正在尝试解决操作系统键盘延迟问题。这是一种方法。

【解决方案2】：

取而代之的是，在第一次按下键时监听，然后在释放时监听。这也意味着您必须在某处记录当前的移动速度状态，以便在这些事件之间应用它。

这个例子只服务于向前走，应该很容易扩展到其他方向。

var playerSpeed = 0;

document.onkeydown = keyDown;
document.onkeyup = keyUp;

function keyDown(e) {
    switch(e.keyCode) {
        case 38: // UP
            playerSpeed = 1; // moving!
            break;
        // other cases...
    }
}

function keyUp(e) {
    switch(e.keyCode) {
        case 38: // UP
            playerSpeed = 0; // NOT moving!
            break;
        // other cases...
    }
}

// Whatever loop is called for each frame or game tick
function updateLoop() {
  // rendering, updating, whatever, per frame
  Player.PositionY += playerSpeed;
}

这样，键盘的重复率是多少都没有关系。每个onkeydown，最终总会有一个onkeyup。您所要做的就是在这些事件之间以不同的方式更新内容。

【讨论】：

【解决方案3】：

你很幸运，我只是为游戏编写代码。

Controller = {
    keyIsDown: [],

    // Add a new control. up is optional.
    // It avoids key repetitions
    add: function (key, down, up) {
        $(document).keydown(function(e) {
            if(e.keyCode === key && !Controller.keyIsDown[key]) {
                    down()
                Controller.keyIsDown[key] = true
                return false
            }
        })

        $(document).keyup(function(e) {
            if(e.keyCode === key) {
                if(up) up()
                Controller.keyIsDown[key] = false
                return false
            }
        })
    },
}

例子：

Controller.add(65,
    function () {
        console.log("A is down")
    },
    // This argument is optional
    function () {
        console.log("A is up")
})

【讨论】：