如何延迟按键输入

Question

window.addEventListener('keydown', function(event) { 
    onKeyDownHandler(event); 
}, false); 


function onKeyDownHandler(e) 
{ 
    var focus_id = e.target.id; 
    switch (e.keyCode) { 
      case 13: // enter 
      if(focus_id == "Text1") 
      { 
      alert("function 1"); 
      }else if(focus_id == "Text2") 
      { 
      alert("function 2"); 
      }else if(focus_id == "Text3") 
      { 
      alert("function 3"); 
      } 
      return; 
    } 
} 

有无论如何，我可以通过点击输入延迟或确保用户不垃圾邮件，我如何在我的输入按钮上设置按键延迟？这是设置延迟计时器还是删除EventListener的最佳方式？

Answer 1

您可以在输入press时创建一个超时，并在另一个输入press时用新的timeout覆盖该先前的超时。这意味着如果您例如在第一次超时结束之前再次按下Enter键，则第一次超时将被新的超时写入，以便在实际超时执行之前获得新的x时间量。这适用于无穷远。

实施例：

var keyup_timeout; 
var timeout_delay_in_ms = 500; 

element.on('keyup', function(e) { 
    e.preventDefault(); // Prevent default enter press action. 
    var enter_pressed; 

    if (e.which === 13) { 
     enter_pressed = true; // Just an example to illustrate what you could do. 
    } 

    if (enter_pressed) { 
     clearTimeout(keyup_timeout); // Clear the previous timeout so that it won't be executed any more. It will be overwritten by a new one below. 

     keyup_timeout = setTimeout(function() { 

      // Perform your magic here. 

     }, timeout_delay_in_ms); 
    } 
}); 

Answer 2

您可以防止一段时间的默认操作中的最后输入按键之后：

window.addEventListener('keydown', onKeyDownHandler, false); 
var lastEnter = null; 
function onKeyDownHandler(e) { 
    var focus_id = e.target.id; 
    switch (e.which || e.keyCode) { // Note the e.which, for x-browser compat 
     case 13: 
      if (lastEnter && Date.now() - lastEnter < 5000) { 
       e.preventDefault(); 
       return; 
      } 
      lastEnter = Date.now(); 

      // Enter key processing... 
      break; 
     // ...other keys... 
    } 
} 

或者使用jQuery（您已经标记了问题jquery，但似乎并没有被使用jQuery在您的代码）：

$(window).on("keydown", function(e) { 
    onKeyDownHandler(e); 
}); 
var lastEnter = null; 
function onKeyDownHandler(e) { 
    var focus_id = e.target.id; 
    switch (e.which) { // jQuery normalizes this for you 
     case 13: 
      if (lastEnter && Date.now() - lastEnter < 5000) { 
       e.preventDefault(); 
       return; 
      } 
      lastEnter = Date.now(); 

      // Enter key processing... 
      break; 
     // ...other keys... 
    } 
} 

---

旁注：

• 由于addEventListener回调的返回值被完全忽略，并且addEventListener仅使用一个参数调用处理程序，如果您在处理程序中没有使用this（因为您看起来不是），所以不需要将功能在onKeyDownHandler左右;直接使用它。
• 某些浏览器使用which作为键码，其他使用keyCode，这就是为什么我在switch中使用e.which || e.keyCode的原因。 JavaScript的好奇功能||运营商将使用e.which如果它不是虚假的，否则e.keyCode。

Answer 3

你可以使用jQuery throttle/debounce插件来处理在keyDown事件中暂停时调用你的函数。