停止jQuery中所有活动的ajax请求

216

我有一个问题，提交表单时所有活动的ajax请求均失败，并触发错误事件。

如何在不触发错误事件的情况下停止jQuery中所有活动的ajax请求？

jquery  ajax 
— 乌皮尔斯基
source

Answers:

273

每次创建ajax请求时，都可以使用变量来存储它：

var request = $.ajax({
    type: 'POST',
    url: 'someurl',
    success: function(result){}
});

然后，您可以中止请求：

request.abort();

您可以使用数组来跟踪所有未决的ajax请求，并在必要时中止它们。

— 达林·迪米特洛夫（Darin Dimitrov）
source
THX，我添加了一个FLAG，因为我同时使用了多个请求
— jcho360 2012年
这是一个简单的工作示例：stackoverflow.com/a/42312101/3818394
— Dharmesh patel
我在函数中有ajax调用，我该如何终止它？
— Kalariya_M
在进行ajax调用时，必须将该变量声明为全局变量才能从另一个函数访问它。示例：多文件上传过程。
— 克莱恩·席尔瓦
180

以下代码段使您可以维护请求列表（池），并在需要时中止所有请求。最好放置在<HEAD>您的html中，然后再进行其他AJAX调用。

<script type="text/javascript">
    $(function() {
        $.xhrPool = [];
        $.xhrPool.abortAll = function() {
            $(this).each(function(i, jqXHR) {   //  cycle through list of recorded connection
                jqXHR.abort();  //  aborts connection
                $.xhrPool.splice(i, 1); //  removes from list by index
            });
        }
        $.ajaxSetup({
            beforeSend: function(jqXHR) { $.xhrPool.push(jqXHR); }, //  annd connection to list
            complete: function(jqXHR) {
                var i = $.xhrPool.indexOf(jqXHR);   //  get index for current connection completed
                if (i > -1) $.xhrPool.splice(i, 1); //  removes from list by index
            }
        });
    })
</script>
— 姆克默里
source
2
@mkmurray-关于IE8中的初始化问题，我似乎得到了Object doesn't support property or method 'indexOf'？我怀疑它可能是stackoverflow.com/a/2608601/181971，或者只是交换到stackoverflow.com/a/2608618/181971吗？
— 蒂姆（Tim）
3
@grr是正确的，请参阅他的答案并检查ajaxSetup的文档。
— kzfabi
@Tim-正如Steven所建议的那样，而不是var index = $ .xhrPool.indexOf（jqXHR）; 使用：var index = $ .inArray（jqXHR，$ .xhrPool）;
— Christopher
1
@mkmurray：它显示TypeError：jqXHR.abort对我来说不是函数。：（
— Shesha
abortAll方法中有一个轻微的逻辑错误，此问题在此处已解决stackoverflow.com/a/45500874/1041341
— Sarin JS
122

如其doc页面所述，使用ajaxSetup是不正确的。它仅设置默认值，如果某些请求覆盖了默认值，则会造成混乱。

我参加晚会很晚，但是如果有人正在寻找解决同一问题的方法，以供将来参考，这是我的工作，它受以前的答案启发并且与以前的答案大致相同，但是更加完整

// Automatically cancel unfinished ajax requests 
// when the user navigates elsewhere.
(function($) {
  var xhrPool = [];
  $(document).ajaxSend(function(e, jqXHR, options){
    xhrPool.push(jqXHR);
  });
  $(document).ajaxComplete(function(e, jqXHR, options) {
    xhrPool = $.grep(xhrPool, function(x){return x!=jqXHR});
  });
  var abort = function() {
    $.each(xhrPool, function(idx, jqXHR) {
      jqXHR.abort();
    });
  };

  var oldbeforeunload = window.onbeforeunload;
  window.onbeforeunload = function() {
    var r = oldbeforeunload ? oldbeforeunload() : undefined;
    if (r == undefined) {
      // only cancel requests if there is no prompt to stay on the page
      // if there is a prompt, it will likely give the requests enough time to finish
      abort();
    }
    return r;
  }
})(jQuery);
— r
source
一个人如何从其他函数中调用abort（）方法？
— 斯坦·詹姆斯
中止是函数，而不是方法。您通常在同一封装内调用它，如果需要在封装外使用它，则可以在函数名称之前删除“ var”，它将变成全局可用的函数
— Trey
嗨，有人可以解释什么时候r将是不确定的？
— Varun
36

这是我目前正在使用的功能。

$.xhrPool = [];
$.xhrPool.abortAll = function() {
  _.each(this, function(jqXHR) {
    jqXHR.abort();
  });
};
$.ajaxSetup({
  beforeSend: function(jqXHR) {
    $.xhrPool.push(jqXHR);
  }
});

注意：存在underscore.js的_.each，但显然没有必要。我只是懒惰，我不想将其更改为$ .each（）。8P

— 安迪·费拉（Andy Ferra）
source
2
我有一个稍作修改的解决方案，效果很好，我即将发布。
— mkmurray 2012年
7
这会泄漏内存。aboutAll应该从数组中删除元素。另外，当请求完成时，它应该将自己从列表中删除。
— Behrang Saeedzadeh 2012年
5
@BehrangSaeedzadeh您还应该发布一个改进的版本。
— 13年
19

给每个xhr请求一个唯一的ID，并在发送之前将对象引用存储在对象中。xhr请求完成后，删除引用。

要随时取消所有请求：

$.ajaxQ.abortAll();

返回已取消请求的唯一ID。仅用于测试目的。

工作功能：

$.ajaxQ = (function(){
  var id = 0, Q = {};

  $(document).ajaxSend(function(e, jqx){
    jqx._id = ++id;
    Q[jqx._id] = jqx;
  });
  $(document).ajaxComplete(function(e, jqx){
    delete Q[jqx._id];
  });

  return {
    abortAll: function(){
      var r = [];
      $.each(Q, function(i, jqx){
        r.push(jqx._id);
        jqx.abort();
      });
      return r;
    }
  };

})();

返回具有单个函数的对象，该对象可在需要时用于添加更多功能。

— 反映
source
17

我发现对于多个请求来说太容易了。

步骤1：在页面顶部定义一个变量：

  xhrPool = []; // no need to use **var**

步骤2：在所有ajax请求中设置beforeSend：

  $.ajax({
   ...
   beforeSend: function (jqXHR, settings) {
        xhrPool.push(jqXHR);
    },
    ...

第三步：在需要的地方使用它：

   $.each(xhrPool, function(idx, jqXHR) {
          jqXHR.abort();
    });
— 达摩什帕特尔
source
就像stackoverflow.com/a/6618288/1772379一样，这会泄漏内存，并且原因完全相同。
— 本·约翰逊
编写JavaScript的方式真可怕。
— 厄齐尔
1
可能在最后，您可以清除/清空xhrPool数组
— 太空地球
6

我在上面扩展了mkmurray和SpYk3HH答案，以便xhrPool.abortAll可以中止给定URL的所有未决请求：

$.xhrPool = [];
$.xhrPool.abortAll = function(url) {
    $(this).each(function(i, jqXHR) { //  cycle through list of recorded connection
        console.log('xhrPool.abortAll ' + jqXHR.requestURL);
        if (!url || url === jqXHR.requestURL) {
            jqXHR.abort(); //  aborts connection
            $.xhrPool.splice(i, 1); //  removes from list by index
        }
    });
};
$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR); //  add connection to list
    },
    complete: function(jqXHR) {
        var i = $.xhrPool.indexOf(jqXHR); //  get index for current connection completed
        if (i > -1) $.xhrPool.splice(i, 1); //  removes from list by index
    }
});
$.ajaxPrefilter(function(options, originalOptions, jqXHR) {
    console.log('ajaxPrefilter ' + options.url);
    jqXHR.requestURL = options.url;
});

用法相同，只是abortAll现在可以选择接受URL作为参数，并且仅取消对该URL的未决调用。

— 科菲夫斯
source
5

我在使用Andy的代码时遇到了一些问题，但这给了我一些很棒的想法。第一个问题是我们应该弹出所有成功完成的jqXHR对象。我还必须修改abortAll函数。这是我的最终工作代码：

$.xhrPool = [];
$.xhrPool.abortAll = function() {
            $(this).each(function(idx, jqXHR) {
                        jqXHR.abort();
                        });
};
$.ajaxSetup({
    beforeSend: function(jqXHR) {
            $.xhrPool.push(jqXHR);
            }
});
$(document).ajaxComplete(function() {
            $.xhrPool.pop();
            });

我不喜欢ajaxComplete（）的处理方式。无论我如何尝试配置.ajaxSetup，它都无法正常工作。

— 汉普斯特
source
7
我认为，如果未按特定顺序完成请求，您可能会在错误请求上调用pop？
— jjmontes 2011年
1
是的，您想要切片而不是弹出。我有一个稍作修改的解决方案，即将发布。
— mkmurray 2012年
4

我已经更新了代码以使其适用于我

$.xhrPool = [];
$.xhrPool.abortAll = function() {
    $(this).each(function(idx, jqXHR) {
        jqXHR.abort();
    });
    $(this).each(function(idx, jqXHR) {
        var index = $.inArray(jqXHR, $.xhrPool);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    });
};

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        $.xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = $.inArray(jqXHR, $.xhrPool);
        if (index > -1) {
            $.xhrPool.splice(index, 1);
        }
    }
});
— 史蒂文
source
4

投入我的精力。针对数组的优惠abort和remove方法xhrPool，并且不容易出现ajaxSetup覆盖问题。

/**
 * Ajax Request Pool
 * 
 * @author Oliver Nassar <onassar@gmail.com>
 * @see    http://stackoverflow.com/questions/1802936/stop-all-active-ajax-requests-in-jquery
 */
jQuery.xhrPool = [];

/**
 * jQuery.xhrPool.abortAll
 * 
 * Retrieves all the outbound requests from the array (since the array is going
 * to be modified as requests are aborted), and then loops over each of them to
 * perform the abortion. Doing so will trigger the ajaxComplete event against
 * the document, which will remove the request from the pool-array.
 * 
 * @access public
 * @return void
 */
jQuery.xhrPool.abortAll = function() {
    var requests = [];
    for (var index in this) {
        if (isFinite(index) === true) {
            requests.push(this[index]);
        }
    }
    for (index in requests) {
        requests[index].abort();
    }
};

/**
 * jQuery.xhrPool.remove
 * 
 * Loops over the requests, removes it once (and if) found, and then breaks out
 * of the loop (since nothing else to do).
 * 
 * @access public
 * @param  Object jqXHR
 * @return void
 */
jQuery.xhrPool.remove = function(jqXHR) {
    for (var index in this) {
        if (this[index] === jqXHR) {
            jQuery.xhrPool.splice(index, 1);
            break;
        }
    }
};

/**
 * Below events are attached to the document rather than defined the ajaxSetup
 * to prevent possibly being overridden elsewhere (presumably by accident).
 */
$(document).ajaxSend(function(event, jqXHR, options) {
    jQuery.xhrPool.push(jqXHR);
});
$(document).ajaxComplete(function(event, jqXHR, options) {
    jQuery.xhrPool.remove(jqXHR);
});
— 昂萨尔
source
2

汇集所有ajax请求并中止它们.....

var xhrQueue = []; 

$(document).ajaxSend(function(event,jqxhr,settings){
    xhrQueue.push(jqxhr); //alert(settings.url);
});

$(document).ajaxComplete(function(event,jqxhr,settings){
    var i;   
    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    }
});

ajaxAbort = function (){  //alert("abortStart");
    var i=0;
    while(xhrQueue.length){ 
        xhrQueue[i++] .abort(); //alert(i+":"+xhrQueue[i++]);
    }
};
— 日格里2612
source
1

最好使用独立代码.....

var xhrQueue = []; 

$(document).ajaxSend(function(event,jqxhr,settings){
    xhrQueue.push(jqxhr); //alert(settings.url);
});

$(document).ajaxComplete(function(event,jqxhr,settings){
    var i;   
    if((i=$.inArray(jqxhr,xhrQueue)) > -1){
        xhrQueue.splice(i,1); //alert("C:"+settings.url);
    }
});

ajaxAbort = function (){  //alert("abortStart");
    var i=0;
    while(xhrQueue.length){ 
        xhrQueue[i++] .abort(); //alert(i+":"+xhrQueue[i++]);
    }
};
— 日格里2612
source
0

同样重要：说您要注销，并且正在使用计时器生成新请求：因为会话数据会随着每个新的引导程序而更新（也许您可以说出我在谈论Drupal，但这可以是使用会话的任何站点）。我必须搜索并替换所有脚本，因为在不同情况下我要运行大量的东西：顶部的全局变量： 

var ajReq = [];
var canAj = true;
function abort_all(){
 for(x in ajReq){
    ajReq[x].abort();
    ajReq.splice(x, 1)
 }
 canAj = false;
}
function rmvReq(ranNum){
 var temp = [];
 var i = 0;
 for(x in ajReq){
    if(x == ranNum){
     ajReq[x].abort();
     ajReq.splice(x, 1);
    }
    i++;
 }
}
function randReqIndx(){
 if(!canAj){ return 0; }
 return Math.random()*1000;
}
function getReqIndx(){
 var ranNum;
 if(ajReq.length){
    while(!ranNum){
     ranNum = randReqIndx();
     for(x in ajReq){
    if(x===ranNum){
     ranNum = null;
    }
     }
    }
    return ranMum;
 }
 return randReqIndx();
}
$(document).ready(function(){
 $("a").each(function(){
    if($(this).attr('href').indexOf('/logout')!=-1){          
     $(this).click(function(){
    abort_all();                 
     });
    }
 })
});
// Then in all of my scripts I wrapped my ajax calls... If anyone has a suggestion for a 
    // global way to do this, please post
var reqIndx = getReqIndx();
if(reqIndx!=0){
ajReq[reqIndx] = $.post(ajax, { 'action': 'update_quantities', iids:iidstr, qtys:qtystr },  
function(data){
 //..do stuff
 rmvReq(reqIndx);
 },'json');
}
— 好消息
source
0 
var Request = {
    List: [],
    AbortAll: function () {
        var _self = this;
        $.each(_self.List, (i, v) => {
            v.abort();
        });
    }
}
var settings = {
    "url": "http://localhost",
    success: function (resp) {
        console.log(resp)
    }
}

Request.List.push($.ajax(settings));

每当您想中止所有ajax请求时，只需调用此行

Request.AbortAll()
— 奥米德·马托里（Omid Matouri）
source
-2

有一个虚拟的解决方案，我用它来中止所有的ajax请求。此解决方案是重新加载整个页面。如果您不希望为每个ajax请求分配一个ID，并且在for循环内发出ajax请求，那么此解决方案是很好的。这将确保所有ajax请求都被杀死。

location.reload();
— 阿索姆
source
-3

这是在任何点击时进行关联的方法（如果您的页面发出了许多AJAX调用，并且您正试图离开，则很有用）。

$ ->
    $.xhrPool = [];

$(document).ajaxSend (e, jqXHR, options) ->
    $.xhrPool.push(jqXHR)

$(document).ajaxComplete (e, jqXHR, options) ->
    $.xhrPool = $.grep($.xhrPool, (x) -> return x != jqXHR);

$(document).delegate 'a', 'click', ->
    while (request = $.xhrPool.pop())
      request.abort()
— D b。
source
By using our site, you acknowledge that you have read and understand our Cookie Policy and Privacy Policy.
Licensed under cc by-sa 3.0 with attribution required.