Question

我在项目中分离了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();
       });
   });
});

Answer 1

.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);

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

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

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

Answer 3

我的建议 - 说清楚：

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进行了测试

多个函数后的JQuery Callback

3 个答案: