Question

我已實現了以下的jQuery代碼

$(".simpleCart_shelfItem button").click(function() { 
      alert(this.value); 
      $(this).addClass('disabled'); 
      $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>"); 
     }); 

的問題與此代碼是，即使它正在處理的代碼，有人再次點擊下面的按鈕它再次開始執行。

如何防止這件事？

Answer 1

您可以添加一個標誌？

var cartInProcess = false; 
$(".simpleCart_shelfItem button").click(function() { 
    if(cartInProcess == false){ 
     cartInProcess = true; 
     alert(this.value); 
     $(this).addClass('disabled'); 
     $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>"); 
     // do your processing 
     cartInProcess = false; 
    }else{ 
     alert("Please wait until the process finishes."); 
    } 
}); 

也可以使用屬性/數據來檢查它而不是全局變量。

$(".simpleCart_shelfItem button").click(function() { 
    if($(this).data("cartInProcess") == undefined || $(this).data("cartInProcess") == false){ 
     $(this).data("cartInProcess", true); 
     alert(this.value); 
     $(this).addClass('disabled'); 
     $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>"); 
     // do your processing 
     $(this).data("cartInProcess", false); 
    }else{ 
     alert("Please wait until the process finishes."); 
    } 
}); 

Answer 2

只需禁用按鈕並在處理後啓用。

$(".simpleCart_shelfItem button").click(function() { 
       $(this).prop('disabled', true); 
       alert(this.value); 
       $(this).addClass('disabled'); 
       $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>"); 
       $(this).prop('disabled', false); 
     }); 

Answer 3

看到，因爲你添加.disabled類，你可以添加到您的函數的第一行：

if ($(this).hasClass('disabled')) 
    return; 

Answer 4

而不是添加一個類來禁用外觀，請在點擊時動態禁用按鈕，並在關聯過程完成後啓用它。

$(".simpleCart_shelfItem button").click(function() { 
    $(this).prop('disabled', true); 
    //$(this).prop('disabled', true).addClass('disabled'); //You can also add class if you want a customized look for disabled button. 
    alert(this.value); 
    $(this).html("Adding &nbsp;&nbsp;<i class='icon-spinner9 spin'></i>"); 
    $(this).removeAttr('disabled'); 
    }); 

Answer 5

最簡單的方法是使用默認按鈕屬性disabled。您可以禁用該按鈕，直到該過程正在進行。一旦完成，您可以再次啓用該按鈕

禁用按鈕

$(".btn-class").prop('disabled', true); 

啓用按鈕

$(".btn-class").prop('disabled', false);