Что такое самый быстрый способ проверить пробел Нажмите JQuery?

Question

У нас есть веб-приложение, которое позволяет пользователям сканировать штрих-код или щелкнуть ссылку, которая скроет ввод штрих-кода и отобразит меню выбора JQuery Chosen.

Чтобы сохранить пользователей, которые должны вручную переключаться между меню выбора продукта поиска и ввода штрих-кода, я проверяю, чтобы пробел нажал в поле ввода штрих-кода, а затем переключил входы и предварительно заполнил выбранное меню выбора с помощью условий поиска пользователей , Он работает правильно, но я обнаружил, что ввод штрих-кода является задержкой в ​​результате проверки на нажатие пробела.

Я новичок в Javascript, и это моя первая попытка. Кто-нибудь сможет показать мне более быстрый или эффективный способ проверить наличие пробела? Это внутреннее веб-приложение для наших сотрудников и требуется только для работы в Safari или Chrome, работающем на MacOS. Любая помощь приветствуется.

$("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') а затем на выбор с: $('input', $chosenSearch)
   2. любого кода, который выполняет в обработчик события должен возвращать 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; 
    }}); 

}); 

---

Поскольку вы также знакомы с 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 
    } 
});