如何防止按键重复被触发 - JavaScript/jQuery

Posted 2023-04-18

【中文标题】如何防止按键重复被触发 - JavaScript/jQuery

【英文标题】：How do I prevent key press from repeatedly being fired - 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上也有一个-> ***.com/questions/24004791/…

事件监听器多久设置一次？每次渲染一帧？

60-100 每秒？你肯定夸大了，我用过的所有键盘的重复率最多约为每秒 30 次左右

我没有夸大其词，这个网站由于内容不多，运行速度非常快，一秒钟我可以达到 100 FPS

这个函数每帧运行一次

【参考方案1】：

感谢keith 回答这个问题！

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