0

セクションをロードする関数があります。

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 関数が終了するのを待ってから先に進むことです。フェードアウトと ajax 呼び出しの両方が完了するのを待つ必要がありますが、フェードアウトが終了した後にのみ ajax 呼び出しを実行する必要があります。

4

3 に答える 3

2

遅延オブジェクトを作成して返し、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;
}
于 2012-10-18T22:31:20.610 に答える
1

を使用してPromise オブジェクトArrayをプッシュし、それを返します。お気に入り

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 resolve の順序をさらに制御する必要がある場合、または結果を傍受/フィルタリングする場合は、promise.pipe()を多少連結するために使用することもできます。

于 2012-10-18T22:21:49.223 に答える
-1

ajax呼び出しを同期させてみてください：

 $.ajax({
    async: false,
    url: settings.apiUrl + 'GetSectionTemplate',
    ...
    ...
于 2012-10-18T22:14:35.427 に答える