Question

我们有一个网络应用程序，允许用户扫描条形码或点击隐藏条形码输入的链接，并显示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

您的无应答行为可能会导致一些原因：

您正在等待keyup事件，因此无论他们推送空格键的速度有多快，您的代码只会在发布时响应。
在你的活动中，你正在做一些缓慢的事情，这也可以称为（微小的）延迟
1. 通过选择器查找元素很慢，尽可能缓存结果
  - 在我的示例中，我避免了缓存$('.chosen-search input')，因为我不确定它是否会动态更改。
  - 无论哪种方式，为了加快速度，您仍然可以缓存：var $chosenSearch = $('.chosen-search')然后选择：$('input', $chosenSearch)
2. 在事件处理程序中执行的任何代码都应该返回ASAP ，除非它打算延迟本机行为（和其他处理程序）
  - 在这种情况下完全矫枉过正，但我已经展示了如何使用setTimeout()异步执行代码，以便事件处理程序返回，然后代码执行。< / LI>
  - 虽然为什么你这样做可能并不明显，但想象一下你的代码执行（比方说）1.5秒 - 在这种情况下在用户键入的每个键出现之前会有1.5秒的延迟在输入框中
  - 将其粘贴在setTimeout()中，确保无论处理时间长短，关键点至少会先做出反应。

我希望有所帮助！

$(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中使用全局变量 - 更好地学习稍微奇怪的方法避免他们（并在此过程中，学习许多很酷的技巧的JavaScript！）

Answer 2

也许尝试“绑定”keyup事件以输入#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
    }
});

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

2 个答案: