如何等待嵌套的异步jQuery AJAX请求完成？ [英] How to wait until nested async jQuery AJAX requests have finished?

问题描述

我正在使用jQuery，我有一个异步AJAX请求循环。我知道我可以通过使用方便的'$ .when.apply（array_of_requests）.then（）'方法等待它们全部完成。

但我也有另一组AJAX请求仅在每个第一个请求完成后执行。我想等他们也完成，但我不是100％肯定我找到了最好的方法。

以下是我的请求的简化示例：

  var intital_data = [1,2,3,4,5,6,7,8,9,10]; 
 var promises = []; 
 var promises_inner = []; 
 
 $ .each（intitial_data，function（i，n）{
 var ajax_call = $ .ajax（{url：'http：//www.domain.com/etc/'+ n}）; 
 promises.push（ajax_call）; 
 
 ajax_call.done（function（data）{
 var ajax_call_inner = $ .ajax（{url：'http：/ /www.domain.com/etc/'+data.result}）; 
 promises_inner.push（ajax_call_inner）; 
 
 ajax_call_inner.done（function（data）{
 / /在这里处理数据内容。
}）; 
}）; 
}）; 
  

因此，当完成十个循环AJAX请求中的每个请求时，我会根据以下内容发出第二个AJAX请求第一个结果。一切正常。

然后我有这样的事情，因为我想要等到前十个请求（存储在promises数组中）和第二批（存储在promises_inner中）已完成：

  $。when.apply（$，promises）.then （
 function（）{
 //十个外部AJAX调用现在完成。
 
 $ .when.apply（$，promises_inner）.then（
函数（）{
 //内部AJAX调用现已完成。
} 
）; 
} 
）; 
  

在第一个$ .when.apply（）。then（）的'done'函数中第二批请求尚未完成，甚至已添加到promises_inner数组中。但是我发现添加一个嵌套的$ .when.apply（）。then（）似乎可以工作 - 在'done'函数中所有请求已经完成。

但我不确定这是最好，最强大的解决方案。我担心这只会巧合 - 它会导致呼叫完成的延迟 - 而不是合乎逻辑。

是否有更好，更坚固的解决方案？谢谢。

解决方案

在1.7中查看$ .Callbacks。我认为你会对制作自己的流程的灵活性以及重复使用它们的能力感到兴奋，运行一次等等。

你的内容没有错确实（应用模式可能不是大多数的首选，它们通常只是在$ .when（a，b，c ....）中列出它们 - 但你可能更喜欢$ .Callbacks的语法。 / p>

I'm using jQuery and I have a loop of asynchronous AJAX requests. I know I can wait for them all to be finished by using the handy '$.when.apply(array_of_requests).then()' method.

But I also have another set of AJAX requests that are only executed after each of the first requests are finished. I want to wait for them to finish too, but I'm not 100% sure I've found the best way.

Here's a simplified example of my requests:

var intital_data = [1,2,3,4,5,6,7,8,9,10];
var promises = [];
var promises_inner = [];

$.each(intitial_data, function(i, n) {
    var ajax_call = $.ajax({url:'http://www.domain.com/etc/'+n});
    promises.push(ajax_call);

    ajax_call.done(function(data) {
        var ajax_call_inner = $.ajax({url:'http://www.domain.com/etc/'+data.result});
        promises_inner.push(ajax_call_inner);

        ajax_call_inner.done(function(data) {
            // Do something with the content of data here.
        });
    });
});

So, when each of the ten looped AJAX requests is done, I make a second AJAX request based on the results of the first. That all works fine.

I then have something like this, because I want to wait until both the first ten requests (stored in the promises array) and the second lot (stored in promises_inner) are completed:

$.when.apply($, promises).then(
    function() {
        // The ten outer AJAX calls are finished now.

        $.when.apply($, promises_inner).then(
            function() {
                // The inner AJAX calls are finished now.
            }
        );
    }
);

Within the first $.when.apply().then()'s 'done' function the second lot of requests hasn't yet been completed, or even added to the promises_inner array. But I found that adding a nested $.when.apply().then() seems to work - within its 'done' function all the requests have finished.

But I'm not sure this is the best, and most robust, solution. I'm worried that it only works coincidentally - that it's causing just enough delay for the calls to have finished - rather than making logical sense.

Is there a better, more rock-solid, solution? Thanks.

解决方案

Take a look at $.Callbacks in 1.7. I think you'll be excited about the flexibility of making your own "flows" and the ability to reuse them, run once, etc.

There's nothing wrong with what you did (the apply pattern may not be a first choice of most, they usually just list them in a $.when(a, b, c....)--but you may like the syntax of $.Callbacks better.

这篇关于如何等待嵌套的异步jQuery AJAX请求完成？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！