javascript - 如何使用回调嵌套 jQuery .when 调用？

Question

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

function loadSection(sectionId, onLoaded) {
    $.when(
        loadTemplate(sectionId),
        // etc
    )
    .then(function () {
        // removed for brevity
    }
}

在 loadTemplate 函数中，我淡出当前模板，淡出后加载新模板。

function loadTemplate(sectionId) {
    // Fade out current template.
    return $content.fadeOut(function () {
        // After fade out, load new template via ajax.
        $.ajax({
            url: settings.apiUrl + 'GetSectionTemplate',
            data: { sectionId: sectionId },
            type: 'post',
            success: function (template) {
                // Add new content and fade in new template.
                $content
                    .html(template)
                    .fadeIn();
            }
        });
    });
}

问题是 $.when 仅等待 fadeOut 函数完成后才继续。我需要它等待 fadeOut 和 ajax 调用完成，但我需要 ajax 调用仅在 fadeOut 完成后执行。

Answer 1

创建一个延迟对象，返回它，然后在 ajax 完成时解析它:

function loadTemplate(sectionId) {
    var deferred = $.Deferred();
    $content.fadeOut(function () {
        $.ajax({
            url: settings.apiUrl + 'GetSectionTemplate',
            data: { sectionId: sectionId },
            type: 'post',
            success: function (template) {
                $content.html(template).fadeIn();
                deferred.resolve();
            }
        });
    });
    return deferred;
}