我还在努力理解deferred等内容，因此我有一个问题，想知道如何实现以下功能。
我的团队和我有三个不同的.load()方法，每个方法都会抓取特定的模板并将其附加到同一容器中。每次加载的时间不同，因此当内容加载时，会以“阶梯式”的方式（1、2、3）加载。我想利用deferred对象，等待它们全部完成，然后同时将它们附加到容器中，以消除“阶梯式”操作。
$('<div>').load(baseInfoTemplate, function () {
var baseData = {
// build some object
};
$.tmpl(this, baseData).appendTo($generalContainer);
});
这三个调用与上面的调用类似。
我该如何实现这个？
我使用下面的代码：
$.when(
$.get('templates/navbar.tmpl.html', function(data) {
$('#navbar').html(data);
}),
$.get('templates/footer.tmpl.html', function(data) {
$('#footer').html(data);
}),
$.Deferred(function(deferred) {
$(deferred.resolve);
})
).done(function() {
$.getScript("js/tools/jquery.min.js");
});
promise对象存储在数组中，并使用$.when()来判断这些promise是否已经被实现。代码示例如下:var templates = [ ];
function createPromise( baseInfoTemplate ) {
return $.Deferred(function( promise ) {
$('<div>').load(baseInfoTemplate, function() {
var baseData = { /* foobar */ };
templates.push( baseData );
promise.resolve();
});
}).promise();
}
var myPromises = [ ];
myPromises.push( createPromise( 'some data' ) );
myPromises.push( createPromise( 'even moar data' ) );
myPromises.push( createPromise( 'foo bar heay' ) );
$.when.apply( null, myPromises ).done( function() {
templates.forEach(function( template ) {
$.tmpl(this, template).appendTo($generalContainer);
});
});
.apply()，因为它接受一个数组作为函数调用的参数。所以基本上，我们将所有promise对象传递给.when()。.load()传输数据后触发"all done"处理程序，则只需要在.load()的success handler中.resolve() promises。这有任何意义吗？.tmpl()并不是很熟悉，但我希望它能提供某种“完成回调”，在那里你可以解决一个promise对象。如果不存在这样的回调，使用promises就毫无意义了。好观点。 - jAndy$.load()确实有一个成功处理程序，但是您的代码在每个模板完成时呈现模板，而不是在它们全部完成时呈现。 - Alnitak$.load()并不适用于与Deferred对象一起使用，而且它的设计目的是立即将内容放入页面中。
要解决后面的问题，您必须在DOM之外渲染整个容器，然后在所有操作完成后再将其放入DOM中，或者您需要累加三个结果，然后一次性将它们全部放入其中。
下面的过程采用了后一种方法：
使用$.get()代替，并创建一个由$.get()返回的jqXHR对象数组
也将每个$.get()返回的HTML片段存储在一个数组中
使用$.when.apply($, myArray).done(function(){...})应用模板并将它们放入DOM中
$.done() 回调中将 那个 DIV 添加到页面中。 - Alnitak$.load() 创建一个 $.Deferred()，然后将 def[n].resolve 设置为 $.load() 中的完成回调。对于每个模板仍然最好有一个单独的 div。 - Alnitak$('#container').loadThen('/').then(function () {
// loaded and ready.
}, function () {
// error
});
$('h1').eq(0).loadThen('/ h1').then(function () {
// loaded and ready.
}, function () {
// error
});
要点内容：
(function ($) {
var _loadThen = $.fn.loadThen;
$.fn.loadThen = function (url, params) {
if (typeof url !== "string" && _loadThen) {
return _loadThen.apply(this, arguments);
}
if(this.length <= 0) {
return jQuery.Deferred().resolveWith(this, ['']);
}
var selector, type, response,
self = this,
off = url.indexOf(" ");
if (off >= 0) {
selector = jQuery.trim(url.slice(off));
url = url.slice(0, off);
}
if (params && typeof params === "object") {
type = "POST";
}
return jQuery.ajax({
url: url,
type: type,
dataType: "html",
data: params
}).then(function (responseText) {
self.html(selector ? jQuery("<div>").append(jQuery.parseHTML(responseText)).find(selector) : responseText);
return self;
});
};
}(jQuery));
var loader = {};
(function(){
var fn = {
promises: [],
templates: [],
loadTemplate: function( name ) {
fn.promises.push(
$.get( `templates/${name}.tmpl.html`,
(html) => fn.templates.push( html )
)
);
},
main: function( templates, callback ) {
templates.forEach( (template) => fn.loadTemplate( template ));
$.when.apply( $, fn.promises ).done( function() {
$( '<div id="templates">' ).html( fn.templates.join() ).appendTo( 'body' );
callback();
});
}
};
/* EXPORTS */
loader.main = fn.main;
})();
function myMain() {
... // do all the things
}
$( document ).ready( function() {
templates = [ 'thingies', 'wotsits', 'oojamaflips' ];
loader.main( templates, () => myMain());
});
<div id="c"> <div id="part1"/> <div id="part2"/> ... </div>- Alnitak