多个功能后的jQuery回调

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 jqXHR一起使用。 但是，您可以轻松地用等效的.get()替换.load() ，然后使用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（）

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

在这种情况下，不能使用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对其进行了测试