在循环中对嵌套的ajax调用使用$ .Deferred（）

Question

我花了太多时间寻找类似的问题并尝试解决方案，所以我希望有人能找到解决方案。

基本上，我想在函数a（）完成时收到通知。问题在于该函数包含一个ajax调用和一个调用b（）的循环，后者又包含一个ajax调用。

更新内容：http :
//jsfiddle.net/hsyj7/1/

像这样：

// called by main()
function a() {
  return $.ajax("http://url1").pipe(function(data){
    for (var i = 0; i < 2; i++) {
      console.log('a called');
      b();
    }
  });
}

// called by a()
function b() {
  for (var i = 0; i < 2; i++) {
    $.ajax("http://url2", function(data){
      // do something
      console.log('b called');
    }
  }
}

function main(){
  $.when(a()).done(function(){
    console.log('all completed');
  });
}

然后，我希望看到的是，可能同时在顶部都调用了a（）：

a called
b called
b called
a called
b called
b called
all completed

相反，我得到了

a called
all completed
b called
b called

或其一些变体。

我知道上面的代码在循环和b（）中都缺少延迟功能。在我尝试过的某些变体中，从未调用main（）中的done（）处理函数。

有人知道怎么做吗？

Answer 1

是的，使用方法Deferred是这样做的：

function a() {
    var def = $.Deferred();

    $.ajax("http://url1").done(function(data){
        var requests = [];

        for (var i = 0; i < 2; i++) {
             requests.push(b());
        }

        $.when.apply($, requests).then(function() { def.resolve(); });
    });

    return def.promise();
}

// called by a()
function b() {
    var def = $.Deferred(),
        requests = [];

    for (var i = 0; i < 2; i++) {
        requests.push($.ajax("http://url2").done(function(data){
            // do something
            console.log('b called');
        });
    }

    $.when.apply($, requests).then(function() { def.resolve(); });

    return def.promise();
}

function main(){
    $.when(a()).done(function(){
        console.log('all completed');
    });
}

//编辑：替换.pipe为.done。