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

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

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

我是 Javascript 新手，这是我的第一次尝试。有人能告诉我一种更快或更有效的方法来检查空格键吗？这是我们员工的内部网络应用程序，只需要在 Safari 或运行在 MacOS 上的 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;
}});

最佳答案

您的 react 迟钝的行为有几个潜在的原因:

你在等待 keyup 事件，所以不管他们按下空格键有多快，你的代码只会在他们释放它时才会响应。

在您的事件中，您正在做一些缓慢的事情，也可以称为(微小的)延迟

通过选择器查找元素很慢，尽可能缓存结果

在我的示例中，我避免缓存 $('.chosen-search input')，因为我不确定它是否会动态更改。

无论哪种方式，为了加快速度，您仍然可以缓存:var $chosenSearch = $('.chosen-search')，然后再选择:$('input', $chosenSearch)

在事件处理程序中执行的任何代码都应尽快返回，除非它打算延迟 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;
  }});

});

关于javascript - 使用 JQuery 检查空格键的最快方法是什么？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/19741411/