javascript - 执行所有回调功能后执行操作

我有以下场景


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


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

我该如何编写Javascript代码，以便在完成所有回调之后附加函数数据，或者仅在执行函数j之后才执行函数i，其中j
我正在使用Javascript和Ajax获取数据。
PS：这几乎类似于新闻提要。

最佳答案

您可以使用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
 });