javascript - 使用 JQuery 检查空格键的最快方法是什么？

Question

我们有一个网络应用程序，允许用户扫描条形码或单击将隐藏条形码输入并显示 JQuery Chosen 选择菜单的链接。

为了避免用户不得不在产品搜索选择菜单和条形码输入之间手动切换，我正在检查条形码输入字段中的空格键，然后切换输入​​并使用用户搜索词预填充所选的选择菜单。它工作正常，但我发现由于检查空格键，条形码输入滞后。

我是 Javascript 的新手，这是我的第一次尝试。有人能告诉我一种更快或更有效的方法来检查空格键吗？这是我们员工的内部网络应用程序，只需要在 MacOS 上运行的 Safari 或 Chrome 中工作。任何帮助将不胜感激。

$("input#barcodeIn").keyup(function(e){
// CHECK FOR SPACEBAR PRESS IN THE BARCODE INPUT FIELD
if (e.keyCode == 32) {
    // SHOW CHOSEN MENU INSTEAD OF BARCODE INPUT BECAUSE WE'RE TYPING A PRODUCT NAME
    $("#inputSwitch").trigger("click");

    // AUTOMATICALLY OPEN THE CHOSEN MENU
    $("#cbProduct").trigger("chosen:open");

    // GRAB WHAT WAS ENTERED INTO THE BARCODE INPUT
    var input = $("#barcodeIn").val()+" ";

    // ENTER THE INPUT TEXT INTO THE CHOSEN SELECT MENU
    $(".chosen-search input").val(input);

    // CLEAR THE BARCODE INPUT BECAUSE WE"RE USING THE CHOSEN SELECT MENU INSTEAD
    $("#barcodeIn").val("");
    return false;
}});

Answer 1

您的无响应行为有几个潜在原因:

1. 您正在等待 keyup 事件，因此无论他们按下空格键的速度有多快，您的代码只会在他们释放时响应。
2. 在您的事件中，您正在做一些缓慢的事情，这也可以称为(微小的)延迟
   1. 通过选择器查找元素很慢，尽可能缓存结果
      • 在我的示例中，我避免缓存 $('.chosen-search input')，因为我不确定它是否动态变化。
      • 无论哪种方式，为了加快速度，您仍然可以缓存:var $chosenSearch = $('.chosen-search') 然后稍后选择:$('input' , $chosenSearch)
   2. 在事件处理程序中执行的任何代码都应尽快返回，除非它打算延迟 native 行为(和其他处理程序)
      • 在这种情况下完全矫枉过正，但我​​已经展示了如何使用 setTimeout() 异步执行代码，以便事件处理程序返回，然后然后您的代码执行。
      • 虽然您可能不太清楚为什么要这样做，但想象一下您的代码需要(比方说)1.5 秒来执行 - 在这种情况下 在用户键入的每个键出现之前会有 1.5 秒的延迟在输入框中
      • 通过将其粘贴到 setTimeout() 中，您可以确保无论处理需要多长时间， key 至少会首先使用react。

希望对您有所帮助!

---

$(function() {

  // cache the selectors to avoid re-scanning inside the event handler
  var $inputSwitch = $('#inputSwitch');
  var $cbProduct = $('#cbProduct');
  var $barcodeIn = $('#barcodeIn');

  // Not strictly necessary, but saves the messiness of callback-in-callback
  function swapContext() {
      // SHOW CHOSEN MENU INSTEAD OF BARCODE INPUT BECAUSE WE'RE TYPING A PRODUCT NAME
      $inputSwitch.trigger("click");

      // AUTOMATICALLY OPEN THE CHOSEN MENU
      $cbProduct.trigger("chosen:open");

      // GRAB WHAT WAS ENTERED INTO THE BARCODE INPUT
      var input = $("#barcodeIn").val()+" ";

      // ENTER THE INPUT TEXT INTO THE CHOSEN SELECT MENU
      $(".chosen-search input").val(input);

      // CLEAR THE BARCODE INPUT BECAUSE WE"RE USING THE CHOSEN SELECT MENU INSTEAD
      $barcodeIn.val("");    
  }

  $("input#barcodeIn").on('keydown', function(e){
  // CHECK FOR SPACEBAR PRESS IN THE BARCODE INPUT FIELD

  if (e.keyCode == 32) {
      // Ensures we can return from the handler quickly
      setTimeout( swapContext, 0 );
      return false;
  }});  

});

---

Since you're also new to Javascript, note that the var statements below are local to the wrapper function, definitely avoid using globals in JS - better to learn the slightly odd ways of avoiding them (and in the process, learn many cool tricks with javascript!)