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

Question

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

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

Answer 1

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

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

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();
  }
});