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

解决方法:

您的反应迟钝的行为有几个可能的原因：

>您正在等待keyup事件,因此无论他们如何快速推送空格键,您的代码只会在发布时响应.
>在你的活动中你正在做一些缓慢的事情,这也可以称为(微小的)延迟

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

>在我的例子中,我避免缓存$(‘.selected-search input’),因为我不确定它是否会动态变化.
>无论哪种方式,为了加快速度,您仍然可以缓存：var $chosenSearch = $(‘.selected-search’)然后选择：$(‘input’,$chosenSearch)

>在事件处理程序中执行的任何代码都应该返回ASAP,除非它打算延迟本机行为(和其他处理程序)

>在这种情况下完全矫枉过正,但我​​已经展示了如何使用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;
  }});  

});

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!)