4

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

2 回答 2

3

您的反应迟钝的行为有几个潜在的原因：

  1. 您正在等待keyup事件，因此无论他们以多快的速度按下空格键，您的代码只会在他们释放它时做出响应。
  2. 在您的活动中，您正在做一些缓慢的事情，这也可能称为（微小的）延迟
    1. 通过选择器查找元素很慢，尽可能缓存结果
      • 在我的示例中，我避免了缓存$('.chosen-search input')，因为我不确定它是否会动态变化。
      • 无论哪种方式，为了加快速度，您仍然可以缓存：var $chosenSearch = $('.chosen-search')然后稍后选择：$('input', $chosenSearch)
    2. 在事件处理程序中执行的任何代码都应尽快返回，除非它打算延迟本机行为（和其他处理程序）
      • 在这种情况下，这完全是矫枉过正，但我​​已经展示了如何使用setTimeout()异步执行代码，以便事件处理程序返回，然后执行代码。
      • 虽然您为什么要这样做可能并不明显，但假设您的代码需要（比如说）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 技巧！）

于 2013-11-02T12:16:34.190 回答
1

也许尝试将 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
    }
});
于 2013-11-02T11:36:53.717 回答