收集按键并在超时后触发功能

Question

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

问题

问题在于，如果我的画布上绘制了许多元素，则移动元素的函数处理时间太长。

最糟糕的是，如果用户按下并按住箭头键，该功能需要被解雇多次，以至于我从浏览器中收到了可怕的无响应脚本警报。

即使用户突然发出按键而不是按住按键，我仍然有问题。

所以我认为要走的路是：

• 收集按键，并在例如2000ms之后启动该功能 适当的keypressCounter - 收集的按键数量 在keyUp之前

上述方法的问题：

即使只进行了一次按键操作，用户也必须等待超时 - 这不会产生巨大的开销 - 因此＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;＆＃39;上述方法不太理想。这将使得轻推功能在快速可行的情况下变得有趣。

最合适的方法是什么？任何建议都是受欢迎的，因为我上面建议的解决方案似乎相当粗糙

备注：

• 我会很感激代码片段，甚至是基本代码片段。我还在 我的早期编码阶段。或者至少是一个全面的解释 任何提议的解决方案。

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

目前的代码：

//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;

         }

     }
 }