Javascript 防止ajax调用触发两次

我有个电话

$('#button1').on('click', function(e){
    $.ajax({
      url:  url,
      type: 'POST',
      async: true,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){

      },
      error: function(){}
    });
    e.stopImmediatePropagation();
    return false;
});

---

现在，10分钟后收到响应。因此ajax调用被多次调用。为什么会发生这种情况/我们如何确保ajax调用只调用一次？

根据Brennan的回答

$('#button1').on('click', function(e){
    $('#button1').attr('disabled', 'disabled');
    $.ajax({
      url:  url,
      type: 'POST',
      async: true,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){
         $('#button1').removeAttr('disabled');
      },
      error: function(){}
    });
    e.stopImmediatePropagation();
    return false;
});

---

在这里，按钮将被禁用，并将在

成功时启用
禁用按钮的替代方法是使用该方法并在回调后重新绑定事件处理程序：

var clickHandler = function(e){
    $.ajax({
      url:  url,
      type: 'POST',
      async: true,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){
        $('#button1').one('click', clickHandler);
      },
      error: function(){}
    });
    e.stopImmediatePropagation();
    return false;
}

$('#button1').one('click', clickHandler);

我也遇到了同样的问题，当我设置
async:false
时，它也能工作。
示例代码如下

$('#button1').on('click', function(e){
    $.ajax({
      url:  url,
      type: 'POST',
      async: false,
      dataType: 'json',
      enctype: 'multipart/form-data',
      cache: false,
      success: function(data){

      },
      error: function(){}
    });
});

只需在调用
.on（）
之前调用
.off（）

这将删除所有事件处理程序：

$(element).off().on('click', function() {
    // function body
});

$(element).off('click').on('click', function() {
    // function body
});

要仅删除已注册的“单击”事件处理程序，请执行以下操作：

$(element).off().on('click', function() {
    // function body
});

$(element).off('click').on('click', function() {
    // function body
});

对我来说，使用jsonp也有同样的问题

2分钟后没有应答$ajax似乎会重新传输请求

我怀疑这是一个浏览器问题，因为jsonp被切换到“现在10分钟后收到响应”-什么？你是怎么打电话的？提供的代码并不是问题的根源，它发生在按钮调用上。更新了代码。你的意思是用户点击按钮不止一次，因为它需要很长时间吗？为什么你的请求需要10分钟？如果要防止代码多次调用ajax源代码，可以创建一个名为“loading”的变量，并在ajax调用之前检查/设置它，如果用户因为响应时间太长而多次点击按钮，则在成功回调中，将按钮设置为单击时禁用，然后在您的成功/错误回调中使用symfony 2重新启用它这是唯一一种为我工作的方法：）谢谢，我想指出，如果您的函数位于每次触发事件时都执行的函数内（例如keyup），则此解决方案也可以工作，但是你希望你的ajax只被调用一次。是的，它对我来说很有效，我认为@thvs86有时也会在函数内部调用它；返回false最后对我有帮助。这对我帮助很大。你不应该这样做，除非你想让你的UI挂起一段时间。我在调用ajax函数之前添加了一个加载图像，但如果我使用async:false，图像不会显示。不为我工作。