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

Answer 2

John Resig 关于$（document）.ready中的函数评估顺序

每次有新功能时添加到队列中，它只是被添加到一个数组 - 然后是执行时再次弹回。如果没有，请告诉我发生在你身上。

$ .readyList - 仅限1.4版前版本

jQuery公开了一个名为$.readyList的属性，这是一个允许函数进行操作的数组，但是$.readyList in no longer publicly exposed in jQuery 1.4.0

黑客方式

您可以尝试$(window).load(function () {});，它应该在整个窗口加载后执行（而不是在文档准备就绪时，与$(document).ready()

一样

Answer 3

根据页面的其余部分，在$.ajaxStop处理程序中执行“额外工作”可能是更优雅的选择。

但是，如果用户能够和/或可能在那些初始调用正在进行时触发后续的$ .ajax（）调用，那将是不合适的。在这种情况下，他们手动触发的调用可能会延长$ .ajaxStop事件的进度。

Answer 4

创建值为0的变量。在每个Ajax调用的成功函数中，将值增加1并检查该值是否等于调用的总数（如果它执行完整函数）。

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

4 个答案: