当所有 jquery.loads 完成时触发 jquery 事件？答案

【问题标题】：jquery event fired when all the jquery.loads are completed?当所有 jquery.loads 完成时触发 jquery 事件？
【发布时间】：2012-03-20 14:00:52
【问题描述】：

我有以下代码：

$(function () {
    $("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
        DoSomething1();
    });
    $("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
        DoSomething2();
    });
    $("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
        DoSomething3();
    });
    $("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
        DoSomething4();
    });
    CodeIWishToExecuteAfterAllLoads();
});

如您所知，jquery 加载是异步的！所以函数 "CodeIWishToExecuteAfterAllLoads()" 将在所有加载事件完成之前执行。

我需要一个事件或某种方式让 "CodeIWishToExecuteAfterAllLoads()" 在所有加载完成后执行

有人知道如何实现吗？

谢谢。

【问题讨论】：

看看 jQuery 延迟对象。 api.jquery.com/category/deferred-object
tutsplus.com/lesson/deferreds

标签： jquery events asynchronous jquery-load

【解决方案1】：

你可以这样做：

var loaded = 0;
var expected = 4;
var record_load = function(){
    loaded++;
    if(loaded == expected)
        CodeIWishToExecuteAfterAllLoads();
}

$("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
    DoSomething1();
    record_load();
});
$("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
    DoSomething2();
    record_load();
});
$("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
    DoSomething3();
    record_load();
});
$("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
    DoSomething4();
    record_load();
});

【讨论】：

我更喜欢这个解决方案 - 这很好，干净，简单，即使是初学者也能理解
在我的情况下，我有“预期”变量以编程方式填充会话变量。 预期 = ;。非常感谢！

【解决方案2】：

$(function () {
    $("#ARO").load('/DA.aspx?section=ARO #ARO', function() {
        DoSomething1();
         $("#ERO").load('/DA.aspx?section=ERO #ERO', function() {
            DoSomething2();
            $("#IRO").load('/DA.aspx?section=IRO #IRO', function() {
                DoSomething3();
                $("#ORO").load('/DA.aspx?section=ORO #ORO', function() {
                    DoSomething4();
                    CodeIWishToExecuteAfterAllLoads();
                });
            });
         });
    });

});

这应该可以正常工作。如果不是，您可以使用 setTimeout() 方法手动延迟几毫秒并执行您的CodeIWishToExecuteAfterAllLoads();

这就是你要找的。p>

【讨论】：

这不起作用！如果这些元素未按您的顺序加载，则永远不会触发 CodeIWishToExecute。
这应该强制他们按顺序加载，除非我错过了什么
我还没有看到你用 ajax 加载东西。我是那个错过了什么的人。我虽然他正在听加载事件:)
我已更改解决方案以处理并行负载。
如果我想按顺序加载所有内容，这将是我的答案。可悲的是，这不是我需要的。不过方法不错

【解决方案3】：

这是我对 jQuery 的 Deferred 所做的事情。

我需要为几个不同的图表加载数据，一旦加载了所有单独的图表数据，我想聚合数据并绘制那个的图表。

Utils = {
  createCharts: function (){
    Utils.initializeCharts();
    Utils.createUserCharts();
  },

  initializeCharts: function (){
    Utils.deferred = $.Deferred().done(function (){
      Utils.createAggregateCharts();
    });

    Utils.remainingCharts = $(".user").size();
  },

  decrementRemainingCharts: function (){
    --Utils.remainingCharts;
    if (Utils.remainingCharts == 0){
      Utils.deferred.resolve();
    }
  },

  createUserCharts: function (){
    $(".user").each(function (i, user){

      // ...

      $.get(href, function (response){
        Utils.chart(chart_id, response);
        Utils.decrementRemainingCharts();
      });
    });
  },

  chart: function (){
    // ...
  },

  createAggregateCharts: function (){
    // ...
  }
};

基本上，您可以创建Deferred 对象，并在“解决”时调用一个函数。然后，根据一些外部条件，您决定何时调用Deferred.resolve。非常优雅。

【讨论】：