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

Answer 2

只需使用 anArray将Promise 对象推入并返回即可。像

function loadTemplate(sectionId) {
    var promises = [ ];

    // Fade out current template.
    promises.push($content.fadeOut());
    promises.push($.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();
        }
    }));

    return promises;
}

然后像这样称呼它

$.when.apply( null,
    loadTemplate(sectionId)
).then(function() {
});

如果您需要对 promise-objects 解析的顺序进行更多控制，或者您想要拦截/过滤结果，您也可以使用.pipe()concat the promises。

Answer 3

尝试使您的 ajax 调用同步：

 $.ajax({
    async: false,
    url: settings.apiUrl + 'GetSectionTemplate',
    ...
    ...