1

我在我的项目中分离了 HTML 文件，并将其加载到主页中。

$("#tabs-1").load("tab1.html");
$("#tabs-2").load("tab2.html");
$("#tabs-3").load("tab3.html");

这个函数是异步的，所以我需要在这三个片段被加载后的回调语句。我只知道如何对 1 个函数使用回调，而不是全部 3 个。这是我想到的解决方法，但我确信一定有更好的方法。

$("#tabs-1").load("tab1.html", function(){
   $("#tabs-2").load("tab2.html", function(){
       $("#tabs-3").load("tab3.html", function(){
           doCallback();
       });
   });
});
4

3 回答 3

4

.load()不返回jqXHR对象，因此不能直接与$.when. 但是，您可以轻松地.load()用等价物替换，.get()然后使用Deferred/Promise策略：

var req1 = $.get("tab1.html", function(data) {
    $("#tabs-1").html(data);
});
var req2 = $.get("tab2.html", function(data) {
    $("#tabs-2").html(data);
});
var req3 = $.get("tab3.html", function(data) {
    $("#tabs-3").html(data);
});
$.when(req1, req2, req3).then(doCallback);

或者，您可以自己维护Deferreds（未经测试！）：

var d1 = $.Deferred(),
    d2 = $.Deferred(),
    d3 = $.Deferred();
$("#tabs-1").load("tab1.html", function() { d1.resolve(); });
$("#tabs-2").load("tab2.html", function() { d2.resolve(); });
$("#tabs-3").load("tab3.html", function() { d3.resolve(); });
$.when(d1, d2, d3).then(doCallback);
于 2013-07-12T07:16:45.423 回答
2

您可以使用$.when()

提供一种基于一个或多个对象（通常是表示异步事件的延迟对象）执行回调函数的方法。

在这种情况下不能使用 load() 函数，因为它不返回 promise 对象

function load(el, path){
    return $.get(path, function(html){
        $(el).html(html)
    })
}

var l1 = load("#tabs-1", "tab1.html");
var l2 = load("#tabs-2", "tab2.html");
var l3 = load("#tabs-3", "tab3.html");
$.when(l1, l2, l3).then(function(){
    doCallback();
})
于 2013-07-12T07:03:02.503 回答
0

我的建议 - 说清楚：

1）为易读界面创建jquery原型函数

    jQuery.fn.extend({
        my_load: function(what) {
            var my_this = this;
            return $.get(what, function(data) {
                my_this.html(data);
            });
        }
    });

2）像这样使用它

        $.when(
            $("#page_1").my_load("page_1.php"),
            $("#page_2").my_load("page_2.php")
        ).then(function() {
            console.log("all loaded");
            // extra code here
        });

我已经在 Chrome 和 IE-11 中使用 jquery-2.0.2 对其进行了测试

于 2014-10-02T06:31:30.723 回答