如何防止按钮上的单击事件(如果按钮已在处理当前请求)

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

看到您正在添加.disabled类，您可以将其添加到函数的第一行：

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

Answer 2

你可以添加一个标志吗？

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 3

只需禁用该按钮并在处理后启用即可。

 $(".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 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);