如何延遲按鍵輸入

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事件中暫停時調用你的函數。