取消以前的jquery表單提交

我有一個搜索表單，我試圖做動態類型。在提交時，我正在提交表單。但是我遇到了大數據集的問題。問題是每個表單提交總是返回一個結果，並且結果總是被插入到DOM中。例如，當我在鍵入時鍵入第4個字符時，它將提交表單並返回100個匹配結果。當輸入第5個字符時，它只返回2個結果。第五個字符的執行時間會比第四個字符快。所以最終發生的是它繪製DOM中的2個結果，然後第4個返回並將100個結果繪製到DOM中。取消以前的jquery表單提交

如果在提交後發生關鍵事件，有沒有辦法取消或忽略先前的表單發佈結果？這裏是形式和通過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>

來源

2016-04-14 JoeyD

提交我覺得你是一個使用debounce功能的經典案例。

Debouncing強制一個函數不會被再次調用，直到經過一定的時間而沒有被調用。正如在「執行只有100毫秒都沒有它被稱爲通過該功能。

你會被以其他方式太多不必要的後端請求。檢查出來https://davidwalsh.name/javascript-debounce-function

來源

2016-04-14 16:15:43

BINGO !!!這就像一個魅力！對於下面的人來說是調整後的代碼基於回答以上以供參考 – JoeyD

@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>

來源

2016-04-15 20:29:54 JoeyD

取消以前的jquery表單提交

回答

相關問題