【问题标题】：How do I prevent key press from repeatedly being fired - JavaScript/jQuery如何防止按键重复被触发 - JavaScript/jQuery
【发布时间】：2019-09-25 14:26:15
【问题描述】：

我有一个功能可以在我的网站上运行每一帧。在里面，有一个按键检查，如果我按下一个键，它会被触发至少 100 次。我怎样才能防止这种情况发生？

我尝试使用等待功能降低 FPS，但要让它工作，我必须将其降低到 5 FPS 左右，这太慢了。

这是永远运行的函数内部的代码（我使用的是socket.io，所以里面有一点。别介意）：

    // Rendering
    $('#svg').empty();
    for (var i = 0; i < players.length; i++){
      var circle = makeSVG('circle', {cx: players[i].x, cy: players[i].y, r: '5vw', stroke: '#00FFFF', 'stroke-width': '0px', fill: '#00FFFF'})
      document.getElementById('svg').appendChild(circle);
    }

    // Key Press
    $(document).keydown(function(e) {
      switch(e.which) {
          case 37: // left
            socket.emit('update', 'left');
            break;

          case 38: // up
            socket.emit('update', 'up');
            break;

          case 39: // right
            socket.emit('update', 'right');
            break;

          case 40: // down
            socket.emit('update', 'down');
            break;

          default:
          break;
      }
      e.preventDefault(); // prevent the default action (scroll / move caret)
    });

    socket.emit('update', 'No Keys')

我希望按键甚至每秒发送 5（大约）次，而不是像我正在经历的 60-100 次。

【问题讨论】：

你会想要使用所谓的debounce，如果你使用 NPM，你可以搜索它。如果您使用的是 lodash，它会使用它，如果您想要一个非 lib 版本。 SO上也有一个-> stackoverflow.com/questions/24004791/…
事件监听器多久设置一次？每次渲染一帧？
60-100 每秒？你肯定夸大了，我用过的所有键盘的重复率最多约为每秒 30 次左右
我没有夸大其词，这个网站由于内容不多，运行速度非常快，一秒钟我可以达到 100 FPS
这个函数每帧运行一次

标签： javascript jquery socket.io

【解决方案1】：

感谢keith 回答这个问题！

答案是使用debounce 函数，效果非常好！

【讨论】：