所有jquery.loads完成后触发jquery事件?

时间:2012-03-20 14:00:53

标签: jquery events asynchronous jquery-load

我有以下代码:

$(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()" 执行

有没有人知道如何完成这项工作?

谢谢。

3 个答案:

答案 0 :(得分:3)

你可以这样做:

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

答案 1 :(得分:0)

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

Hopt这就是你要找的东西。

答案 2 :(得分:0)

这是我用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。它非常优雅。