如何在使用jquery开始新事件之前等待一组事件完成?

时间:2013-10-23 14:02:36

标签: javascript jquery

我有一组事件要在某些div中加载一些html:

$("#id1").load("1.html");
$("#id2").load("2.html");
$("#id3").load("3.html");
$("#id4").load("4.html");

然后我隐藏了一个加载栏:

$("#load-bar").hide();

但当然一切都在同一时间发生。

如何将加载元素组合在一起,只在完成后才执行隐藏功能?

1 个答案:

答案 0 :(得分:6)

使用$.when()

<击>

<击>
$.when($("#id1").load("1.html"), $("#id2").load("2.html"), $("#id3").load("3.html"), $("#id4").load("4.html")).done(function () {
    $("#load-bar").hide();
});

<击>


Johan评论

后更新
var load1 = $.ajax({
    url: '1.html',
    dataType: 'html'
}),
    load2 = $.ajax({
        url: '2.html',
        dataType: 'html'
    }),
    load3 = $.ajax({
        url: '3.html',
        dataType: 'html'
    }),
    load4 = $.ajax({
        url: '4.html',
        dataType: 'html'
    });

$.when(load1, load2, load3, load4).done(function () {
    $("#load-bar").hide();
});

如果您有可变数量的请求,则可以使用 - &gt;评论人 Bill Criswell

$.when.apply($, arrayOfDeferreds).done(doWhenAllDone);