如何嵌套jquery.when调用
如何嵌套jquery.when调用
提问于 2012-10-18 05:25:20
我有一个函数可以加载报告的一部分。
// function to load section
function loadSection(sectionId) {
$.when(
// Now load the specified template into the $overlay.
loadTemplate(sectionId),
// After the template is in place we need to identify all
// the editable areas and load their content.
loadEditables(sectionId)
)
.then(function () {
// Now find all section link elements and wire them up.
buildSectionLinks(),
// Find all hover elements and attach the hover handlers.
loadHovers()
});
}我们的想法是加载一个模板，然后迭代模板以找到所有的“可编辑内容”，即模板中用户提供的内容区域。一旦加载了模板和所有可编辑内容，我们就会对标记进行一些处理，比如将单击事件绑定到某些元素。所有模板和可编辑的ajax调用都需要在处理之前完成。
对loadTemplate(sectionId)的调用在jQuery.when中工作得很好，因为我只做了一次ajax调用。
// This function goes out to an AJAX endpoint and gets the specified
// report template and appends it to the overlay DIV.
function loadTemplate(sectionId) {
return $.ajax({
url: settings.templateUrl,
data: { sectionId: sectionId },
type: 'post',
success: function (template) {
$overlay.append(template);
}
});
}loadEditables(sectionId)函数的实现并不简单，因为我必须遍历所有的可编辑内容，并为每个可编辑内容执行一次ajax调用。
// This function loads content for all editables defined in the template.
function loadEditables(sectionId) {
// Grab all editables into a jQuery wrapped set.
var $editables = $('#template .editable');
// Loop through each editable and make an AJAX call to load its content.
$editables.each(function () {
var $editable = $(this);
$.ajax({
type: 'post',
url: settings.editableUrl,
data: {
sectionId: sectionId,
editableIndex: $editable.data('editableindex')
},
success: function (editable) {
if (editable.hasData)
$editable.html(editable.content);
}
});
});
}在loadTemplate中，我可以简单地通过return $.ajax(...)函数来满足$.when(...)。在这里，我循环遍历包装的set，并为set中的每个元素执行一个新的ajax调用。在触发处理函数(buildSectionLinks()和loadHovers())之前，如何确保所有这些调用都已完成？
回答 2
Stack Overflow用户
回答已采纳
发布于 2012-10-18 05:29:26
将promise对象存储在数组中，然后使用.apply将该数组传递给$.when
function loadEditables(sectionId) {
// Grab all editables into a jQuery wrapped set.
var $editables = $('#template .editable'),
defArr = [];
// Loop through each editable and make an AJAX call to load its content.
$editables.each(function () {
var $editable = $(this);
defArr.push($.ajax({
type: 'post',
url: settings.editableUrl,
data: {
sectionId: sectionId,
editableIndex: $editable.data('editableindex')
},
success: function (editable) {
if (editable.hasData)
$editable.html(editable.content);
}
}));
});
return $.when.apply($,defArr);
}Stack Overflow用户
发布于 2012-10-18 05:29:57
您需要将每个.promise对象写入一个数组并返回该数组。在函数外部，可以调用.when() with.apply()`正确调用。
function loadEditables(sectionId) {
// Grab all editables into a jQuery wrapped set.
var $editables = $('#template .editable'),
promises = [ ];
// Loop through each editable and make an AJAX call to load its content.
$editables.each(function () {
var $editable = $(this);
promises.push($.ajax({
type: 'post',
url: settings.editableUrl,
data: {
sectionId: sectionId,
editableIndex: $editable.data('editableindex')
},
success: function (editable) {
if (editable.hasData)
$editable.html(editable.content);
}
}));
});
return promises;
}然后我们就像这样
$.when.apply( null, loadEditables() ).done(function() {
});页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/12943645
复制相关文章
相似问题
腾讯云开发者
