删除 JavaScript 中的按键延迟？

Posted 2023-03-17

【中文标题】删除 JavaScript 中的按键延迟？

【英文标题】：Remove keydown delay in 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 是的，谢谢 :)

【参考方案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")
)