使用JQuery检查Spacebar出版社的最快方法是什么？

Question

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

为了节省用户必须手动切换产品搜索选择菜单和条形码输入，我正在检查条形码输入字段中的空格键，然后切换输入并用用户搜索条件预填选定的选择菜单。它工作正常，但我发现条形码输入是滞后的，因为检查空格键按下。

我刚接触过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')，然后在select with：$('input', $chosenSearch)上

​

1. any code which executes in an event handler should return ASAP _unless_ it intends on delaying the native behaviour (and other handlers) 
    - It's complete overkill in this case, but I've shown how you can use `setTimeout()` to execute your code asynchronously so that the event handler returns, and _then_ your code executes.
    - whilst it might not be obvious why you'd do this, imagine that your code took (say) 1.5 seconds to execute - in that case _there would be a 1.5second delay before every key the user typed showed up in the input box_
    - by sticking it in a `setTimeout()` you ensure that no matter how long your processing takes, the key will at least react first.

​

​

我希望这能帮上忙！

$(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;
  }});  

});

既然您也是Javascript的新手，请注意，下面的var语句是包装器函数的本地语句，一定要避免在JS中使用globals --更好地学习避免它们的稍微奇怪的方法(在此过程中，使用javascript学习许多很酷的技巧！)

Answer 2

也许尝试将keyup事件“绑定”到input#barcodeIn (参见：http://www.solicitingfame.com/2011/11/09/jquery-keyup-vs-bind/ )

简单地说，该链接执行如下操作：

// detect the change
$('input#barcodeIn').bind("change keyup input",function(e) {
    if (e.keyCode == 32) {
        //enter code here
    }
});