Javascript 收集按键并在超时后启动功能

我正在构建一个小型CAD应用程序，允许用户选择项目，然后按左/右箭头键移动它们

问题 问题是，如果画布上绘制了许多元素，则移动元素的函数需要花费太长的时间来处理

最糟糕的是，如果用户按住箭头键，该函数需要被触发很多次，以至于我的浏览器会发出可怕的无响应脚本警报

即使用户触发按键而不是按住它，我仍然有一个问题

因此，我认为应该走的路是：

• 收集按键，并在2000毫秒后启动功能 适当的按键计数器-收集的按键次数 加密前

上述方法的问题：

即使只按了一次键，用户也必须等待超时-这不会产生巨大的开销-因此上述“粗糙”方法不太理想。这将使轻推功能在速度可能更快的地方感觉笨拙

解决这个问题的最正确方法是什么？欢迎提出任何建议，因为我上面建议的解决方案似乎相当粗糙

注意事项：

• 我会欣赏代码片段，甚至是最基本的。我还在家 我的早期编码阶段。或者至少是一个全面的解释 任何拟议的解决办法

• 我使用Paper.js作为画布库来绘制项目，但是 不应该成为任何解决方案的一个因素

到目前为止的代码：

//Keybinding“right”箭头键-启动函数向左微移。
$（文档）.keydown（函数（e）{
如果（e.which==39）{
轻推选择（“右”）；
}
});
//移动选定元素的函数。接受方向作为参数。
功能轻推选择（方向）{
所选变量=paper.project.selectedItems；
对于（变量i=0；i

你可以使用@Teemu，这样我可以更容易地进入俱乐部？JK，现在检查一下。@Teemu去抖器工作得很好-但它在延时期间不收集按键。有没有办法做到这一点？这就是脱口而出者的目的。。。可能您应该使用小于2秒的延迟。如果要收集所有按键，那么在查询中执行这些按键时，代码仍将被卡住。我会完全忘记“额外”按键。@Teemu我想我可以在debouncer函数中收集按键的数量，然后将它们作为参数传递给nudge（）函数。看起来是一个双赢的局面。去抖器也可以充当“缓冲区”

//Keybinding ''right'' arrow key - Fires up the function to nudge left. 

$(document).keydown(function (e) {
    if (e.which === 39) {
        nudgeSelection("right");
    }
});



//Function that moves the selected element(s). Accepts direction as parameter.

 function nudgeSelection(direction) {

     var selected = paper.project.selectedItems;

     for (var i = 0; i < selected.length; i++) {
         switch (direction) {
         case "up":
             selected[i].position.y = selected[i].position.y - 1;

             break;
         case "down":
             selected[i].position.y = selected[i].position.y + 1;

             break;
         case "left":
             selected[i].position.x = selected[i].position.x - 1;

             break;
         case "right":
             selected[i].position.x = selected[i].position.x + 1;

             break;

         }

     }
 }