Question

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

// 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()

    });

}

我们的想法是，我们将加载一个模板，然后遍历模板以查找所有可编辑的＆＃34;，它们只是模板中用户提供的内容区域。一旦加载了模板和所有可编辑的内容，我们就会对标记进行一些处理，以便将点击事件绑定到某些元素。所有模板和可编辑的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(...)。在这里，我循环遍历包装集并为集合中的每个元素执行新的ajax调用。如何在启动处理函数（buildSectionLinks()和loadHovers()）之前确保完成所有这些调用？

Answer 1

将promise对象存储在数组中，然后使用$.when

将该数组传递给.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);
}

Answer 2

您需要将每个.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() {
});

如何嵌套jquery.when调用

2 个答案: