Javascript 如何嵌套jquery.when调用

我有一个函数可以加载报告的一部分

// 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）
函数实现起来并不简单，因为我必须循环遍历所有的editables，并对每个editables进行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
中，我能够在函数中简单地
返回$.ajax（…）
，以满足
$.when（…）
的要求。在这里，我将遍历包装好的集合，并为集合中的每个元素执行一个新的ajax调用。如何确保在启动处理函数（
buildSectionLinks（）
和
loadHovers（）
）之前完成所有这些调用？
将承诺对象存储在数组中，然后将该数组传递给
$。当使用
执行
时，应用

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

将承诺对象存储在一个数组中，然后将该数组传递给
$。当使用
.apply

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

您需要将每个
.promise
对象写入一个数组并返回该数组。在函数之外，您可以使用
.apply（）`调用
.when（），以正确调用它

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

您需要将每个
.promise
对象写入一个数组并返回该数组。在函数之外，您可以使用
.apply（）`调用
.when（），以正确调用它

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

将承诺对象存储在一个数组中，然后将该数组传递给
$。当使用
.apply
将承诺对象存储在一个数组中，然后将该数组传递给
$。当使用
.apply
时，这太棒了！我能问一下为什么在他的回答中你将
$
传递到
apply（）
和@jAndy传递
null
？我只传递
$
，因为
$
是
$的上下文。默认情况下，
。因为<代码>$。当<代码>实际上没有使用它的上下文时，这并不重要。这太棒了！我能问一下为什么在他的回答中你将
$
传递到
apply（）
和@jAndy传递
null
？我只传递
$
，因为
$
是
$的上下文。默认情况下，
。因为
$。当
实际上没有使用它的上下文时，这并不重要。