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

Question

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

我有一个元素

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

和一个绑定(bind)到它的 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');
  });
});

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

根据评论；如果您希望 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 类时才能被点击。这也适用于按钮元素，因此无需为这两种方法重复代码。