jquery - 如何控制 jQuery $(document).ready 中调用函数的顺序

Question

我需要能够控制 $(document).ready 事件中正在处理的项目的顺序。
这些是多个控件，从多个文件加载，所有控件都要求在 ready 事件中调用。它们都启动对服务器的异步调用 (AJAX)。只有当它们全部完成后，我才需要做一些额外的工作。

对此的优雅解决方案是什么？

Answer 1

异步请求按顺序触发，但会按照它们首先完成的顺序返回。因此，没有一种确定的方法可以强制它们同时结束，但是，您可以构建规则以仅在某些组返回后运行代码。

例如，使用一组规则定义一个回调函数，并将其传递给所有 ajax 请求的每个 success 回调。

var completedObject = {};

function groupSuccessCallback() {
  // Test for any combination of requirements
  if ( completedObject.ajax1 && completedObject.ajax2 ) {
    ... // Do something that only requires 1 and 2
  }
  if ( completedObject.ajax1 && completedObject.ajax2 && completedObject.ajax3) { 
    ... // Do something that requires all 3 being done
        // your data is available at completedObject.ajax#
  }

  // Or test for _all_ entries for a dynamic count
  var allComplete = true;
  for(var i in completedObject) {
     if ( completedObject.hasOwnProperty(i) && !completedObject[i] ) {
       allComplete = false;
     }
  }

  // Do whatchya need.
  if (allComplete) { 
    alert("bb-b-bb-b-b-b-bbb... that's all folks!");
  }
}

然后在成功函数中设置标志:

// Ajax1
completedObject['anything'] = false; // instantiate a dynamic entry in the object or use an array if you can't use names.
$.ajax({
  ...,
  ...,
  success: function(data) {
    completedObject['anything'] = data || true;
    groupSuccessCallback();
  }
});