按住按键时事件侦听器延迟

Question

我为我正在制作的基于网络的游戏制作了一个相当简单的移动脚本，我注意到当按住某个键时，它会运行一次移动，等待一段时间，然后开始连续移动。我认为这是浏览器所做的事情，以防止用户在按住某个键太长时间时意外输入数千个字母，但是有什么方法可以禁用此功能吗？

这是我的“Game”类中使用的方法，它具有运行游戏所需的所有功能

movement(player) {
    let movements = {
        up: false,
        down: false,
        left: false,
        right: false,
        speed: 0,
        maxSpeed: 10,
        lastMove: null
    }

    function controls(e) {
        const key = e.key;
        if (key == "w") {
            e.preventDefault();
            movements.up = true;
        }
        if (key == "s") {
            e.preventDefault();
            movements.down = true;
        }
        if (key == "a") {
            e.preventDefault();
            movements.left = true;
        }
        if (key == "d") {
            e.preventDefault();
            movements.right = true;
        }
    }

    function movement(x) {
        let direction = null;

        if (movements.up) direction = "up";
        else if (movements.down) direction = "down";
        else if (movements.left) direction = "left";
        else if (movements.right) direction = "right";

        if (direction) {
            if (direction == "up" || direction == "down") {
                player.src = `${x.data.entities.player.image}${direction}.png`;
                player.style.top = `${parseInt(player.style.top) + (direction == "up" ? -1 : 1) * movements.speed}px`;
            } else {
                player.src = `${x.data.entities.player.image}${direction}.png`;
                player.style.left = `${parseInt(player.style.left) + (direction == "left" ? -1 : 1) * movements.speed}px`;
            }
            movements.lastMove = direction;
        }

        if (direction && movements.speed < movements.maxSpeed) {
            movements.speed++;
        }

        if (direction) {
            movements.up = false;
            movements.down = false;
            movements.left = false;
            movements.right = false;
        }

        requestAnimationFrame(() => movement(x));
    }


    requestAnimationFrame(() => movement(this));
    document.addEventListener("keydown", (e) => {
        controls(e);
    });
}

Answer 1

最小化对操作系统和硬件的依赖的一个众所周知的方法是自己处理按键状态（向上或向下）。然后你可以通过查看这个字典对象来判断按键何时按下。

var obj_down = {}
var direction

window.addEventListener("keydown", function(ev) {
  obj_down[ev.key] = true;
})

window.addEventListener("keyup", function(ev) {
  delete obj_down[ev.key];
})


function loop() {
  var keys = Object.keys(obj_down)
  output.innerText = "" + keys

  // for example:
  if (obj_down["ArrowDown"]) {
    direction = "down"
  }
  requestAnimationFrame(loop)
}
loop()

Keys that are currently down: 
<div id="output"></div>