Question

在我的页面中，我调用了15个ajax请求。此外，我有一个按钮，取消所有待处理的ajax请求。 As per documentation，abort（）终止请求（如果已经发送）。

现在当我检查我的控制台时，即使我点击取消按钮，我也会收到一些来自ajax脚本的回复（我想这些已经在我点击该按钮时发送）。那么，一旦按下取消按钮，怎样才能确保没有回复？

You can check the script here（不能使用jsfiddle，因为不知道如何发出ajax请求）。

JS代码

var xhrPool = [];

$(window).load(function(){
        callAjax1();
});

$.ajaxSetup({
    beforeSend: function(jqXHR) {
        xhrPool.push(jqXHR);
    },
    complete: function(jqXHR) {
        var index = xhrPool.indexOf(jqXHR);
        if (index > -1) {
            xhrPool.splice(index, 1);
        }
    }
});

var abortAjax = function () {
    $.each(xhrPool, function(idx, jqXHR) {
        if(jqXHR && jqXHR .readystate != 4){
            jqXHR.abort();
        }
    });
    console.log("All pending cancelled"); // Should not have any ajax return after this point
    $.xhrPool = [];
};

$("#cancel-button").click(function (){
        abortAjax();
});


function callAjax2(ajaxcallid){
    console.log("Initiate ajax call " + ajaxcallid); // Should not have any ajax return after this point
    $.ajax({
        method: "POST",
        url: "test.php"
    })
    .done(function( msg ) {
        console.log(msg + ajaxcallid); // msg = "Ajax return for "
    })
    .fail(function( jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    });
}

function callAjax1(){
    $.ajax({
        method: "POST",
        url: "test.php"
    })
    .done(function( msg ) {
        for(var i = 0; i < 15; i++){
            callAjax2(i);
        }
    })
    .fail(function( jqXHR, textStatus, errorThrown) {
        console.log(errorThrown);
    });
}

控制台输出：

Answer 1

试试这个

$.each(xhrPool.slice(), function(idx, jqXHR) {

我认为当你中止时，有些人正在返回，所以阵列搞砸了

这样您就可以使用数组的快照

但是，由于课程的时间安排，一两个人仍然可能会偷偷摸摸

中止所有异步请求

1 个答案: