防止双击执行两次jQuery post请求

Question

我搜索了相同的问题，但没有找到一个适合我的具体案例的问题。

我有一个元素

<span id="myButton">Click</span>

以及绑定到它的 jQuery 后请求

$(document).ready( function()
      {
      $(document).on( 'click', '#myButton', function(e)
        {
        $.post( "RESPONDING_WEBPAGE_HERE.php" ).done( function( result )
            {
            console.log( result );
            });
        });
      });

现在，每次单击按钮时，它都会发出一个后请求。说得通。如果结果函数 (.done()) 被执行，我想要的是一个只执行后请求的好解决方案。

当然，我知道用 var isAjaxRequest = false; 之类的变量来处理它，将其设置为 true，然后在结果函数中返回 false，但也许有更好的（jQuery build -in) 的方式。

这是我现在的解决方案。如果有更好的，我会非常棒。

var isAjaxRequest = false;    
$(document).ready( function()
          {
          $(document).on( 'click', '#myButton', function(e)
            {
            if( !isAjaxRequest )
              {
              isAjaxRequest = true;
              $.post( "RESPONDING_WEBPAGE_HERE.php" ).done( function( result )
                {
                isAjaxRequest = false;
                console.log( result );
                });
              }
            });
          });

谢谢你=)

Answer 1

我通常在单击按钮时将按钮设置为禁用，然后在 POST 请求的回调中删除禁用属性。

$(document).on('click', '#button', function () {
  $('#button').attr('disabled', true);

  $.post('something').done(function () {
    $('#button').removeAttr('disabled');
  }).fail(function () {
    $('#button').removeAttr('disabled');
  });
});

这将防止按钮在被点击后再次被点击。

根据 cmets；如果您希望在 span 元素或其他不允许 disabled 属性的元素上具有此行为，则可以在单击时设置一个类。

$(document).on('click', 'span#button:not(.disabled)', function () {
  $(this).addClass('disabled');

  $.post('something').done(function () {
    $(this).removeClass('disabled');
  }).fail(function () {
    $(this).removeClass('disabled');
  });
});

上面的代码将确保元素只有在没有disabled 类的情况下才能被点击。这也适用于按钮元素，因此无需为这两种方法重复代码。

Answer 2

我喜欢使用.one() 附加事件处理程序，并在ajax 调用完成后重新附加事件。即使您的目标不支持禁用，这也将处理所有情况：

//define handler function
var myButtonHandler = function(e) {
  $.post("RESPONDING_WEBPAGE_HERE.php").done(function() {
    attachButtonHandler("#mybutton"); //re-attach the click event after AJAX complete
  });
}

//attach an event handler that's only good for one click
function attachButtonHandler(selector) {
  $(document).one('click', selector, myButtonHandler);
}

//on doc ready, attach the event handler for the first time
$(function() {
  attachButtonHandler("#mybutton");
});