执行完所有回调功能后执行操作

Question

我有以下场景

  

asyncFunction（x1）
  asyncFunction（x2）
  asyncFunction（x3）
  ...
  ...
  asyncFunction（xn）映射

asyncFunction的功能是从服务器获取数据和图像并附加到html的主体。问题是每次数据大小都不同，因此每个功能可能在不同时间完成。这使得它无用，因为即使在加载底部元素之后，一些顶部元素仍将加载。

如何编写Javascript代码，使得在完成所有回调之后附加函数数据，或者仅在执行函数j之后执行函数i，其中j <1。岛

我正在使用Javascript和Ajax来获取数据。 PS：这几乎与新闻提要类似。

Answer 1

您可以使用jquery deffered objects

在每个函数中定义deffered对象，例如：

var asyncFunction1 = function(x1) {
   var d = new $.Deferred();
   ...
   //when it will be ready
   d.resolve();
   ...
   return d.promise();
}

然后

$.when(asyncFunction1(), asyncFunction2(), ...).done(function() {
    // here all functions will be finished
 });

Answer 2

使用可以使用promises轻松完成此操作。通过this等文章告知自己该主题。然后我建议您查看Q framework。

您正在寻找的是，只有在所有承诺都已解决后才能执行代码。如果您使用Q：

，这将是这样的

Q.all([a,b,c,d]).then(function(){
     //runs after all of the promises fulfilled
});