Question

I have a function that loads a section.

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

In the loadTemplate function I fade out the current template, and after the fadeout I load the new template.

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

The problem is that the $.when only waits for the fadeOut function to finish before moving on. I need it to wait for both the fadeOut and the ajax call to finish, but I need the ajax call to execute only after the fadeOut finishes.

Answer 1

Create a deferred object, return it, and then resolve it when the ajax completes:

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