淺談一下如何避免用戶屢次點擊形成的屢次請求

淺談一下如何避免用戶屢次點擊形成的屢次請求

1、有效地在web客戶端採用必定機制去防止重複點擊提交，將大大減輕服務器端壓力。

1> 定義標誌位：
　點擊觸發請求後，標誌位爲false量；請求（或者包括請求後具體的業務流程處理）後，標誌位爲true量。經過標誌位來判斷用戶點擊是否具有應有的響應。

2> 卸載及重載綁定事件：
點擊觸發請求後，卸載點擊事件；請求（或者包括請求後具體的業務流程處理）後，從新載入綁定事件。

2、請求頻度
相信你們碰到過這樣的業務，咱們容許它重複點擊（或者其餘用戶事件），可是不容許在必定的時間內超過次數XX次。這從用戶友好體驗及服務器承受壓力選取了一個折中方案。
最合適不過的例子，莫過於關鍵字搜索匹配了。

var timer = null;
$(input).keyup(function () {
  var value = $(this).val();
  clearTimeout(timer);
  //若是鍵盤敲擊速度太快，小於100毫秒的話就不會向後臺發請求，可是最後總會進行一次請求的。
  timer = setTimeout(function () {
    //觸發請求
    $.ajax({
      url: 'typeahead.do',
      type: 'get',
      data: value,
      success: function () {
        //顯示匹配結果
        //......
      }
    });
  }, 100);
});

3、總結

　　從宏觀意義上來說，咱們須要對每個按鈕去作」防止重複點擊提交「，面對這種狀況，咱們即可以採用必定策略來對其進行封裝實現（如定義通用按鈕類綁定事件）。

　　從具體狀況上來說，咱們並不須要對每個按鈕都去作」防止重複點擊提交「，僅僅須要對某些可能具備複雜後臺業務邏輯、或者文件上傳、或者調用其餘非本工程接口致使網絡延遲等等狀況須要去作」防止重複點擊提交「。與此同時，咱們必需要給予用戶友好提示(如文本提示、渲染loading條、顯示文件上傳進度條等等)。二者須要一塊兒來看、一塊兒來作。固然，咱們能夠單獨提取狀態顯示這個實現邏輯。代碼以下——

//全站ajax加載提示
(function ($) {
  var str = '<div class="ajax-status" style="display: none;">' +
    '<div class="ajax"><img src="img/loading.gif" width="20height="20" />數據加載中...</div>' +
    '</div>';
  var dom = $(str).prependTo('body');
  $(document).ajaxStart(function () {
    dom.stop(true, false).queue(function () {
      $(this).show().dequeue();
    });
  })
  $(document).ajaxStop(function () {
    dom.queue(function () {
      $(this).hide().dequeue();
    });
  });
})(jQuery);