的jQuery JavaScript的嵌套异步函数回调

Question

我有点困惑如何确定何时称为异步函数多次从另一个完成对最后一个迭代的电话：

function MainAsyncFunction(callback) { 
    for (var i = 0; i < 10; i++) { 
    SubAsyncFunction(function(success) { 
     if (i >= 10 && success) { // THIS IS WRONG?! 
     callback(true); // happens too early 
     } 
    }); 
    } 
}; 

function SubAsyncFunction(callback) { 
    SubSubAsyncFunction(function() { 
     callback(true); 
    }); 
} 

我在做什么在呼唤Google Distance Matrix service，它有25个目的地的限制，因此我不得不拆分我的目的地数组来调用这个服务多次，但我不明白它什么时候结束。

并且在代码的主要位中，我可以看出MainAsyncFunction中的循环的第二次迭代在进行回调时尚未完成。

我认为我的问题是我在处理JavaScript中的异步函数时没有掌握事件的顺序......请解释如何正常实现主题。

Answer 1

您可以使用jQuery Deferred对象，该对象充当表示异步操作状态的标记。

下面是一个简化的例子：

//set up your sub method so that it returns a Deferred object 
function doSomethingAsync() { 
    var token = $.Deferred(); 
    myAsyncMethodThatTakesACallback(function() { 
     //resolve the token once the async operation is complete 
     token.resolve(); 
    }); 
    return token.promise(); 
}; 

//then keep a record of the tokens from the main function 
function doSomethingAfterAllSubTasks() { 
    var tokens = []; 
    for (var i=0; i < 100; i++) { 
     //store all the returned tokens 
     tokens.push(doSomethingAsync()); 
    } 

    $.when.apply($,tokens) 
     .then(function() { 
      //once ALL the sub operations are completed, this callback will be invoked 
      alert("all async calls completed"); 
     }); 
}; 

以下是OP的更新的代码的更新版本：

function MainAsyncFunction(callback) { 
    var subFunctionTokens = []; 
    for (var i = 0; i < 10; i++) { 
    subFunctionTokens.push(SubAsyncFunction()); 
    } 

    $.when.apply($,subFunctionTokens) 
    .then(function() { 
    callback(true); 
    }); 
}; 

function SubAsyncFunction() { 
    var token = $.Deferred(); 
    SubSubAsyncFunction(function() { 
     token.resolve(); 
    }); 
    return token.promise(); 
};​ 

Answer 2

也许是ajaxStop() event？这是一个jQuery事件，只有当所有活动的AJAX请求完成时才会触发。

Answer 3

的问题是，的i值被不断地在改变循环失败后，最终出界。

解决这个问题的最简单方法是：

for(i=0; i<5; i++) { // or whatever your loop is 
    (function(i) { 
     // the value of i is now "anchored" in this block. 
    })(i); 
}