jQuery 在 3 个 AJAX 调用和循环完成后执行答案

【问题标题】：jQuery execute after 3 AJAX calls and loops are donejQuery 在 3 个 AJAX 调用和循环完成后执行
【发布时间】：2013-08-16 17:23:25
【问题描述】：

var request3 = 
window.SendAjax(window.siteRoot + "Home/GetTweets", "{}", function(msg) {
    //tweet
    $.each(msg, function(i, value) {
       ...

    });
    console.log("loop done");
});


$.when(request1, request3).then(function () {
  console.log(feedItems);
});

我正在尝试使用 $.when() jQuery 方法。我有 3 个 AJAX 方法可以获取数据然后对数据执行循环。 $.when 在 AJAX 异步完成时执行，我需要它等到循环完成。我没有展示所有代码，但是有 3 个 AJAX 调用可以获取数据然后执行循环。当所有三个都完成后，然后做一些事情。想法？

【问题讨论】：

SendAjax 是否返回了一个 promise 对象？

标签： jquery .when

【解决方案1】：

我假设SendAjax() 看起来像这样：

function SendAjax(url, data, callback) {
    return $.ajax({
        ...
        success: callback,
        ...
    });
}

如果是这样，请将其更改为：

function SendAjax(url, data, callback) {
    var def = $.Deferred();
    return $.ajax({
        ...
        success: function() {
            callback();
            def.resolve();
        },
        ...
    });
    return def.promise();
}

那么你可以这样做：

var ajax1 = SendAjax(...);
var ajax2 = SendAjax(...);
var ajax3 = SendAjax(...);

$.when(ajax1, ajax2, ajax3).done(function() {
    //do stuff
});

【讨论】：

这非常正确，尽管我不明白为什么要包装 ajax 调用。只需将每个 ajax 承诺传递给 when 函数（可能需要几个）。一旦一个查询失败或全部成功，这将解决： $.when($.ajax(paramsA), $.ajax(paramsB)).then(mycompletionFunc)
我不知道他为什么有便利功能，但他有，所以我尝试使用它。
您不需要额外的$.Deferred()是吗？返回 $.ajax() 就足够了，因为从 jQuery 1.5 开始由 $.ajax() 返回的 jqXHR 对象实现了 Promise 接口
他想等到回调完成，而不仅仅是 ajax 调用。
啊哈.. 我没有注意到那个细节，Jason P. 很好的捕捉 =)

【解决方案2】：

最简单的事情是计数器和检查：

var counter = 0;

$.ajax('....', function(data) {
    ... do your processing loop here
    counter++;
    if (counter >= 3) {
        do_the_post_counter_stuff();
    }
});

当每个 ajax 响应处理程序完成时，它会增加计数器并检查它是否超过限制。如果超出限制，它只会调用您的“向前移动”函数。

【讨论】：

我认为他是在说他是三个不同的 ajax 函数，而不是三次调用同一个函数。
如果只有 1 个 ajax 调用，那会起作用，但有 3 个，你不知道它们将按什么顺序完成。
没关系。只需将计数器增量/检查放入每个 ajax 调用的响应处理程序中，然后。 @mark：你永远不知道多个 ajax 调用将以什么顺序完成。
哦，对了，我现在明白了。我没有看到全局计数器变量。猜猜应该可以。

【解决方案3】：

我自己也遇到了类似的问题。我在 while 循环中运行了一系列 ajax 请求。有些电话没有被打！它杀了我！我的结论是我的浏览器——谷歌浏览器——忽略了“重复”请求。

看看这个伪代码：

while (i < ajaxCallArray.length) {
    currentAjaxObject = ajaxCallArray[i];
    ajaxPost = $.post(currentAjaxObject.url, function(data) {
    //response data needs to go into a function such that each request gets its own "data" variable created.otherwise it just overwrites data!!
    processAjaxResponse(data, currentAjaxObject);
        },"json");
i++;
}

如果 ajaxCallArray[0].url = "http://www.google.com"、ajaxCallArray[1].url = "http://www.google.com" 和 ajaxCallArray[2].url = "http://www.google.com" 浏览器实际上只会进行 1 次调用！！

解决办法：即使您不使用这些 url 参数，您也必须执行 ajaxCallArray[0].url = "http://www.google.com?count=0"、ajaxCallArray[1].url = "http://www.google.com?count=0" 和 ajaxCallArray[2].url = "http://www.google.com?count=0" 之类的操作，只需添加一些内容以使它们与众不同。这样浏览器将处理所有调用，即使它们是立即完成的。

希望这会有所帮助！

【讨论】：