jquery - 如何按顺序执行 ajax 成功回调？

Question

我的网站上有多个异步 AJAX 请求。我想要做的是将这些请求中的每一个的成功回调放入队列并按顺序执行它们。我该怎么做？

我查看了类似this或this的插件，但它们似乎只是按顺序排列 AJAX 请求，而不是它们的回调。

我尝试使用jQuery 中的.queue()，但无法执行第二个队列。这是一个jsFiddle。

var q = $({});

$.ajax({
   url: 'test'
})
.done(function () {
    q.queue(function () {
       alert('You should always see this message first.');
    });
});

$.ajax({
    url: 'test'
})
.done(function () {
    q.queue(function () {
        alert('And this next.');
    });
});

Answer 1

你可以使用when：

var req1 = $.ajax({
   url: 'test'
})
.done(function () {
    alert('You should always see this message first.');
});

var req2 = $.ajax({
    url: 'test'
});

$.when(req1, req2)
    .done(function () {
        alert('And this next.');
    });

或像这样：

var req1 = $.ajax({
   url: 'test'
})
.done(function () {
    alert('You should always see this message first.');
});

var req2 = $.ajax({
    url: 'test'
})
.done(function () {
    $.when(req1).done(function(){
        alert('And this next.');
    });
});

如果你有很多请求，你可以用一个数组和一个函数来概括一下。

---

未经测试的通用解决方案

var requests = [];

function queueCallback(deferred, callback){
    requests.push(deferred);
    $.when.apply(null, requests).then(callback);
}

那么它将像这样使用：

queueCallback($.ajax(...), function(){ /* callback */});