jquery - 处理多个ajax请求和模板结果

Question

这实际上是一个单线程问题以及 javascript 本身如何工作的问题。但是，我还没有找到绕过这个的方法。

我有一个标准的ajax请求:

$.ajax({
   url: url,
   cache: false,
   success: function (response) {
       // send to handlebars template
       resultsPlaceholder.html(template(response));
   });
});

以上效果很好。

我需要做的实际上是获取该结果，循环并运行另一个 api 请求并将其添加到原始数据中:

$.ajax({
   url: url,
   cache: false,
   success: function (response) {
       $.each(response.results, function(key, value) {
          $.ajax({
                type: "GET",
                url: url + "?id=" + response.results[key].id,
                dataType: 'jsonp',
            }).done(function(return_data) {
                response.results[key].details = return_data.info;
            });
       });
       resultsPlaceholder.html(template(response));
   });
});

明显的问题是，发送到 Handlebars 模板的数据是在所有 ajax 请求在循环中完成之前发生的。

这并非特定于 Handlebars 。我只是想知道有什么约定可以避免这种情况。我不想使用 setTimeout，这看起来很黑客。

谢谢。

Answer 1

为了详细说明 Ryley 的评论，类似这样的内容应该有效:

var promises = [];

$.getJSON(url).done(function(response) {
    $.each(response.results, function(key, val) {
        promises.push($.get(url, {id: val.id}));
    });
});

//When all of the promises are resolved
$.when.apply($, promises).done(function() {
    var responses = Array.prototype.slice.call(arguments);

    //Do what you need to do with responses
    //And then load your handlebars template
    resultsPlaceholder.html(template(responses));
});

说明:

这只是循环您的初始 AJAX 响应并创建一系列 promise 。然后您可以使用 $.when.apply() 因为(我假设)您不知道第一个响应中有多少项。

祝你好运:)