Question

我已经搜索了同样的问题，但针对我的具体情况找不到一个问题。

我有一个元素

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

和绑定到它的jQuery post-request

$(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构建） -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请求的回调上的disabled属性。

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

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

这样可以防止在单击按钮后再次单击该按钮。

根据评论;如果您希望在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");
});

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

2 个答案: