我們在訪問有的網站，輸入表單完成以后，單擊提交按鈕進行提交以后，提交按鈕就會變為灰色，用戶不能再單擊第二次，直到重新加載頁面或者跳轉。這樣，可以一定程度上防止用戶重復提交導致應用程序上邏輯錯誤。
還有很多其他的方式進行防止重復點擊提交，如
1> 定義標志位：
點擊觸發請求后，標志位為false量；請求（或者包括請求后具體的業務流程處理）后，標志位為true量。通過標志位來判斷用戶點擊是否具備應有的響應。
2> 卸載及重載綁定事件：
點擊觸發請求后，卸載點擊事件；請求（或者包括請求后具體的業務流程處理）后，重新載入綁定事件。
3> 替換（移除）按鈕DOM
點擊觸發請求后，將按鈕DOM對象替換掉（或者將之移除），自然而然此時不在具備點擊事件；請求（或者包括請求后具體的業務流程處理）后，給新的按鈕DOM定義點擊事件。
首先說說防止重復點擊提交是什么意思。
我們在訪問有的網站，輸入表單完成以后，單擊提交按鈕進行提交以后，提交按鈕就會變為灰色，用戶不能再單擊第二次，直到重新加載頁面或者跳轉。這樣，可以一定程度上防止用戶重復提交導致應用程序上邏輯錯誤。
不妨引深來看，它不一定發生在表單的提交事件上，同樣可以發生在ajax的異步請求上。有效地在web客戶端采用一定機制去防止重復點擊提交，將大大減輕服務器端壓力。
那么，我們就不妨從表單提交及ajax的兩種不同請求的處理過程中，來試試如何防止重復點擊提交。
一、表單提交
就以登錄表單為例，代碼如下：
<form action="login.do" method="post">
<input type="text" name="username" />
<input type="password" name="password" />
<input type="submit" onclick="this.disabled=true; this.value='登錄中...'; this.form.submit();" value="登錄" />
</form>
單擊登錄按鈕進行提交以后，提交按鈕就會變為灰色，並且給用戶一個友好提示（登錄中...），用戶不能再單擊第二次，直到重新加載頁面或者跳轉。
可以發現，我們不需要給這個按鈕恢復到可以再次登錄的狀態，僅僅源於頁面重新進行了加載或者跳轉。
但是，針對ajax的請求上，我們又該如何處理呢？
二、ajax請求
1 (function ($) {
2
3 $('.J-login').click(function () {
4
5 var loginBtn = this;
6
7 //1.先進行表單驗證
8 //......
9
10 //2.讓提交按鈕失效，以實現防止按鈕重復點擊
11 $(loginBtn).attr('disabled', 'disabled');
12
13 //3.給用戶提供友好狀態提示
14 $(loginBtn).text('登錄中...');
15
16 //4.異步提交
17 $.ajax({
18 url: 'login.do',
19 data: $(this).closest('form[name="loginForm"]').serialize(),
20 type: 'post',
21 success: function(msg){
22
23 if (msg === 'ok') {
24 alert('登錄成功！');
25
26 //TODO 其他操作...
27 } else {
28 alert('登錄失敗，請重新登錄！');
29
30 //5.讓登陸按鈕重新有效
31 $(loginBtn).removeAttr('disabled');
32 }
33
34 }
35 });
36
37 });
38
39 })(jQuery);
可以發現，當登錄失敗后，需要重新讓登錄按鈕具有登錄事件。
當然，我們可以用一個更加優雅的方式來代替之。
1 (function ($) {
2
3 $('.J-login').click(function () {
4
5 var loginBtn = this;
6
7 //1.先進行表單驗證
8 //......
9
10 //2.異步提交
11 $.ajax({
12 url: 'login.do',
13 data: $(this).closest('form[name="loginForm"]').serialize(),
14 type: 'post',
15 beforeSend: function () {
16 //3.讓提交按鈕失效，以實現防止按鈕重復點擊
17 $(loginBtn).attr('disabled', 'disabled');
18
19 //4.給用戶提供友好狀態提示
20 $(loginBtn).text('登錄中...');
21 },
22 complete: function () {
23 //5.讓登陸按鈕重新有效
24 $(loginBtn).removeAttr('disabled');
25 },
26 success: function(msg){
27
28 if (msg === 'ok') {
29 alert('登錄成功！');
30
31 //TODO 其他操作...
32 } else {
33 alert('登錄失敗，請重新登錄！');
34 }
35
36 }
37 });
38
39 });
40
41 })(jQuery);
在這里，我僅僅舉了一個最為簡單的例子，還有很多其他的方式進行防止重復點擊提交，如
1> 定義標志位：
點擊觸發請求后，標志位為false量；請求（或者包括請求后具體的業務流程處理）后，標志位為true量。通過標志位來判斷用戶點擊是否具備應有的響應。
2> 卸載及重載綁定事件：
點擊觸發請求后，卸載點擊事件；請求（或者包括請求后具體的業務流程處理）后，重新載入綁定事件。
3> 替換（移除）按鈕DOM
點擊觸發請求后，將按鈕DOM對象替換掉（或者將之移除），自然而然此時不在具備點擊事件；請求（或者包括請求后具體的業務流程處理）后，給新的按鈕DOM定義點擊事件。
當然，還有其他的方式進行實現，歡迎各位博友補充。
三、請求頻度
相信大家碰到過這樣的業務，我們允許它重復點擊（或者其他用戶事件），但是不允許在一定的時間內超過次數XX次。這從用戶友好體驗及服務器承受壓力選取了一個折中方案。
最合適不過的例子，莫過於關鍵字搜索匹配了。
相信大家定然首先想到節流函數了。
1 var timer = null;
2
3 $(input).keyup(function(){
4
5 var value = $(this).val();
6
7 clearTimeout(timer);
8
9 //如果鍵盤敲擊速度太快，小於100毫秒的話就不會向后台發請求，但是最后總會進行一次請求的。
10 timer = setTimeout(function() {
11 //觸發請求
12 $.ajax({
13 url: 'typeahead.do',
14 type: 'get',
15 data: value,
16 success: function () {
17 //顯示匹配結果
18 //......
19 }
20 });
21 },100);
22
23 });
四、總結
從宏觀意義上來講，我們需要對每一個按鈕去做”防止重復點擊提交“，面對這種情況，我們便可以采用一定策略來對其進行封裝實現（如定義通用按鈕類綁定事件）。
從具體情況上來講，我們並不需要對每一個按鈕都去做”防止重復點擊提交“，僅僅需要對某些可能具有復雜后台業務邏輯、或者文件上傳、或者調用其他非本工程接口導致網絡延遲等等情況需要去做”防止重復點擊提交“。與此同時，我們必須要給予用戶友好提示(如文本提示、渲染loading條、顯示文件上傳進度條等等)。兩者需要一起來看、一起來做。當然，我們可以單獨提取狀態顯示這個實現邏輯。代碼如下——
1 //全站ajax加載提示
2 (function ($) {
3
4 var str = '<div class="ajax-status" style="display: none;">'
5 + '<div class="ajax"><img src="' + publicPath + 'img/loading.gif" width="20" height="20" />數據加載中...</div>'
6 +'</div>';
7
8 var dom = $(str).prependTo('body');
9
10 $(document).ajaxStart(function(){
11 dom.stop(true,false).queue(function(){
12 $(this).show().dequeue();
13 });
14 });
15
16 $(document).ajaxStop(function(){
17 dom.queue(function(){
18 $(this).hide().dequeue();
19 });
20 });
21
22 })(jQuery);