4

ユーザーがバーコードをスキャンしたり、バーコード入力を非表示にして JQuery Chosen 選択メニューを表示するリンクをクリックしたりできる Web アプリがあります。

ユーザーが製品検索の選択メニューとバーコード入力を手動で切り替える手間を省くために、バーコード入力フィールドでスペースバーが押されていることを確認してから、入力を切り替えて、選択した選択メニューにユーザーの検索用語を事前入力します。正しく動作しますが、スペースバーの押下をチェックした結果、バーコードの入力が遅いことがわかりました。

私はJavascriptが初めてで、これが私の最初の試みです。スペースバーが押されたかどうかを確認するためのより高速または効率的な方法を誰かが教えてくれませんか? これは、スタッフ用の内部 Web アプリであり、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')が動的に変化するかどうかわからなかったため、キャッシュを避けました。
      • どちらの場合でも、高速化するために cache:var $chosenSearch = $('.chosen-search')を使用し、後で select を使用できます:$('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 を使用した多くのクールなトリックを学びます)。 !)

于 2013-11-02T12:16:34.190 に答える
1

keyup イベントを input#barcode に「バインド」してみてください: 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 に答える