1

我有一个加载报告部分的功能。

// 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(...). 在这里，我遍历包装的集合并为集合中的每个元素执行新的 ajax 调用。如何确保在触发处理函数（buildSectionLinks()和loadHovers()）之前完成所有这些调用？

4

2 回答 2

4

将 promise 对象存储在一个数组中，然后将该数组传递给$.whenusing.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);
}
于 2012-10-17T21:29:25.980 回答
4

您需要将每个.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() {
});
于 2012-10-17T21:29:56.913 回答