有個類似商品管理的功能，商品通過execle 檔案匯入商品，然後“檢查”匯入的資料的合法性功能。

由於匯入的商品的數量一般較大，所以點選一次“檢查”按鈕，每次的執行時間相對較長，使用者往往會進行多次點選“檢查“”按鈕，造成程式開銷較大，甚至程式卡死，或者因為ajax 提交的回撥函式等待執行時間過長，導致頁面假死或崩潰。所以必須要給類似這樣的按鈕加上“控制”------在ajax 執行時，使按鈕失效（不能點選），待後太程式碼執行完畢後，再回調函式中處理一下這個button，使之可以繼續點選。

這樣的功能貌似很好實現，但是期間遇到個小問題，自己困惑了個把小時，所以拿出自己的經歷，以便其他遇到此類問題的小夥伴們節約更多時間，下面貼關鍵程式碼：

<button type="button" id="check" class="btn_divBtn del float_btn"  href="#">檢查</button>

程式碼片段A:

$("#check").click(function(){
$("#check").addClass('disabled').attr('disabled', true); //---------------------------17行
$.ajax({
url:"${base}/impstkmas/check.jhtml",
type : 'post',
dataType:'json',
async:false,
success: function(data){
$("#check").removeClass('disabled').attr('disabled', false);//-----------------------------24行
if(data.success){
$("#grid-table").jqGrid('setGridParam',{  
           postData:{} //傳送資料  
       }).trigger("reloadGrid"); //重新載入  
$.jBox.tip('檢查完成！', 'success');
}else{
$.jBox.tip(data.msg, 'error');
}
}
});
});

程式碼片段B:

$("#check").click(function(){
$(this).addClass('disabled').attr('disabled', true);//--------------------------------17 行
$.ajax({
url:"${base}/impstkmas/check.jhtml",
type : 'post',
dataType:'json',
async:false,
success: function(data){
$(this).removeClass('disabled').attr('disabled', false);//--------------------------------24 行
if(data.success){
$("#grid-table").jqGrid('setGridParam',{  
           postData:{} //傳送資料  
       }).trigger("reloadGrid"); //重新載入  
$.jBox.tip('檢查完成！', 'success');
}else{
$.jBox.tip(data.msg, 'error');
}
}
});
});

大家比較上面兩段程式碼，可以看出區別：

A段程式碼是正確的執行，B段程式碼是不能正確執行的。開始特別疑惑：

$(this).addClass('disabled').attr('disabled', true);  和  $(this).removeClass('disabled').attr('disabled', false);  一個是使button失效，一個是使button 生效，為什麼只能失效，不能回覆生效。

原因相信大家已經看出來了，這裡是用在ajax 裡的，我急竟然忽略了ajax 的最大特點：“非同步”！！！。 沒錯，就是這個特點導致，17 行的程式碼執行完了，是可以的，因為$(this) 元素是被認識的。而 24 行的程式碼，死活就是執行不了，因為他用在了回撥函式裡了，此時再用$(this)，程式碼已經不認識$(this)指的是哪個元素了，所以執行不了。

總結一句話就是，17 行的 $(this) 和 24 行的 $(this) 是不一樣的，所以，大家還是儘量不偷懶，用元素選擇器在選擇出來的物件是可定不會錯的！