如何避免 JavaScript 中的自动重复按键事件？

Question

如果用户按住该键，则会触发多个 keydown 事件。出于可用性原因，我需要使用 keydown，而不是 keyup，但我想避免这种情况。我的相关代码如下：

 $(document).keydown(function(e) {
        var key = 0;

        if (e == null) { key = event.keyCode;}
        else {  key = e.which;}

        switch(key) {
            case config.keys.left:
              goLeft();
              break;
            case config.keys.up:
              goUp();
              break;
            case config.keys.right:
              goRight();
              break;
            case config.keys.down:
              goDown();
              break;
            case config.keys.action:
              select();
              break;
        }
      });

因此，例如，当用户按住向下键时，会多次触发 goDown() 。即使用户按住键，我也希望它只触发一次。

原文由 agente_secreto 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

使用 event.repeat 检测事件是否重复。然后，您可以在允许处理程序第二次执行之前等待“keyup”。

 var allowed = true;

$(document).keydown(function(event) {
  if (event.repeat != undefined) {
    allowed = !event.repeat;
  }
  if (!allowed) return;
  allowed = false;
  //...
});

$(document).keyup(function(e) {
  allowed = true;
});
$(document).focus(function(e) {
  allowed = true;
});

原文由 4esn0k 发布，翻译遵循 CC BY-SA 3.0 许可协议

Answer 2

对已接受答案的另一个简单调整以允许多键场景：

 var keyAllowed = {};

$(document).keydown(function(e) {
  if (keyAllowed [e.which] === false) return;
  keyAllowed [e.which] = false;
  // code to be executed goes here
});

$(document).keyup(function(e) {
  keyAllowed [e.which] = true;
});

$(document).focus(function(e) {
  keyAllowed = {};
});

原文由 mattybrad 发布，翻译遵循 CC BY-SA 3.0 许可协议