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

一、有效地在web客戶端采用一定機制去防止重復點擊提交，將大大減輕服務器端壓力

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

1> 定義標志位：

點擊觸發請求后，標志位為false量；請求（或者包括請求后具體的業務流程處理）后，標志位為true量。通過標志位來判斷用戶點擊是否具備應有的響應。

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); });

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

三、總結

從宏觀意義上來講，我們需要對每一個按鈕去做”防止重復點擊提交“，面對這種情況，我們便可以采用一定策略來對其進行封裝實現（如定義通用按鈕類綁定事件）。

從具體情況上來講，我們并不需要對每一個按鈕都去做”防止重復點擊提交“，僅僅需要對某些可能具有復雜后臺業務邏輯、或者文件上傳、或者調用其他非本工程接口導致網絡延遲等等情況需要去做”防止重復點擊提交“。與此同時，我們必須要給予用戶友好提示(如文本提示、渲染loading條、顯示文件上傳進度條等等)。兩者需要一起來看、一起來做。當然，我們可以單獨提取狀態顯示這個實現邏輯。代碼如下——

//全站ajax加載提示 (function ($) { var str = '

'; 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);

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

web前端

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。