前のJqueryフォームをキャンセルするキーアップで送信

Question

私は、動的なタイプをダウンしようとしている検索フォームを持っています。キーアップで私はフォームを提出しています。しかし、私は大きなデータセットの問題に取り組んでいます。問題は、各フォーム提出が常に結果を返し、結果が常にDOMに挿入されることです。たとえば、キーアップで4番目の文字を入力すると、フォームが送信され、100個の一致する結果が返されます。 5番目の文字を入力すると、2つの結果しか返されません。 5番目のキャラクタの実行時間は、4番目より速く戻ります。そこで起こったことは、DOMで2つの結果をペイントし、次に4番目の結果を返し、100個の結果をDOMにペイントすることです。

送信後にキーアップイベントが発生した場合、前のフォーム投稿結果をキャンセルまたは無視する方法はありますか？こちらのフォームであると私はあなたがdebounce機能を使用しての古典的なケースだと思うのjavascript

@using (Ajax.BeginForm(new AjaxOptions 
{ 
    HttpMethod = "get", 
    InsertionMode = InsertionMode.Replace, 
    UpdateTargetId = "Breweries" 
})) 
{ 
    <input id="brewerySearchInput" class="form-control page-header-input" placeholder="Search" type="search" name="searchTerm" /> 
} 

<script> 
    $("#brewerySearchInput").keyup(function() { 
     if ($(this).val().length >= 3 || $(this).val().length == 0) { 
      $('#form0').delay(200).submit(); 
     } 
    }); 
</script> 

Answer 1

を経由して提出します。

デバウンスでは、呼び出されることなく一定時間が経過するまで関数が再度呼び出されないように強制します。以下のように「100ミリ秒は、それが呼び出されることなく経過している場合にのみ、この機能を実行する。

あなたがそうでなければ、あまりにも多くの不要なバックエンドの要求を作ることになります

。アウトそれをチェッククマーが頭の上にこれを釘付けhttps://davidwalsh.name/javascript-debounce-function

Answer 2

@bhabisha 。デバウンス機能は、私が動作するようにコードを取得するために必要な正確に何である。ここでは、最終的な作業コードがある。

<script> 

    function debounce(func, wait, immediate) { 
     var timeout; 
     return function() { 
      var context = this, args = arguments; 
      var later = function() { 
       timeout = null; 
       if (!immediate) func.apply(context, args); 
      }; 
      var callNow = immediate && !timeout; 
      clearTimeout(timeout); 
      timeout = setTimeout(later, wait); 
      if (callNow) func.apply(context, args); 
     }; 
    }; 

    var myEfficientFn = debounce(function() { 
     if ($(this).val().length >= 3 || $(this).val().length == 0) { 
      $('#form0').submit(); 
     } 

    }, 300); 

    $("#brewerySearchInput").keyup(myEfficientFn); 
</script>