在循环中使用$ .Deferred()和嵌套的ajax调用

Question

我花了太多时间寻找类似的问题和尝试解决方案,所以我希望有人有解决方案.

基本上,我希望在函数a()完成时得到通知.问题是该函数包含一个ajax调用和一个调用b()的循环,它再次包含一个ajax调用.

用FIDDLE更新: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.