多功能后的JQuery回调

我在我的项目中加载了独立的HTML文件，我加载到主页面。多功能后的JQuery回调

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

来源

2013-07-12 Hazaart

对我来说很好 –

事实是我有更多的测试，它在Chrome和IE中-11比3个片段，所以我正在寻找一个更清洁的方式 – Hazaart

也在这个例子中，片段不是一起装载，而是1一起加载。 – Hazaart

不返回jqXHR对象，因此不能与$.when直接使用。你可以很容易做到，但是，比同等.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);

来源

2013-07-12 07:16:45 jensgram

我用你的最后一个例子，它的工作原理。谢谢！ – Hazaart

您可以使用$.when()

提供一种方法来执行基于一个或多个对象，代表异步事件通常递延对象的回调函数。

负载（）函数不能在这种情况下使用，因为它不返回承诺对象

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-12 07:03:02

'.load（）'不会返回'jqXHR'对象。这会工作得更少，还是应该将'.load（）'替换为'.get（）'？ – jensgram

@jensgram对不起，我错过了 –

任何我错过了downvote –

我的建议 - 要清楚：

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

我用jQuery-2.0.2

来源

2014-10-02 06:31:30

多功能后的JQuery回调

回答

相关问题