然后結束時才調用中的函數

Question

我不知道為什么JQuery不等到一個函數結束。 我正在使用when().then()子句，並且第一個函數返回AJAX調用。

$('#id_language_from').on('change', function () {
        blockLoader();
        var rtl = refreshTargetLanguages();
        var rstl = refreshSummaryTargetLanguages();
        $.when(rtl).then(rstl).then(unblockLoader);

    });

問題是rstl必須等到rtl結束，但事實並非如此。

CHROME CONSOLE： （RSTL應該在“成功完成RTL”之后）

RTL
RSTL
...
DONE SUCCESS RTL

RTL和RSTL

function refreshTargetLanguages() {
    console.log('RTL');
    var language_id = $('#id_language_from').val();
    if (language_id != '') {
        var request_url = '/orders/ajax/get-languages-to-exclude/';
        return $.ajax({
            url: request_url,
            method: 'post',
            data: {'language_id': language_id},
            success: function (data) {
                $('.class_target_languages').show();

                window.changeunbind = 1;

                $('.target_language_choice.active').trigger('click');

                window.changeunbind = 0;

                $.each(data, function (key, value) {
                    hideTargetLanguageById(key);
                });
                console.log('DONE SUCCESS RTL')
            }
        })
    } else {
        console.log('call HATL');
        return hideAllTargetLanguages();
    }
}

function refreshSummaryTargetLanguages() {
    console.log('RSTL');
    var summ_ul_targ_langs = $('#summary_target_languages > ul');
    $('#id_summary_price').text('');
    var active_languages = $('.target_language_choice.active');
    console.log(active_languages);
    var words_count = $('#id_word_count').text();
    if (active_languages.length < 1 || !Boolean(words_count)) {
        console.log('emtpy');
        return summ_ul_targ_langs.find('ul').empty();

    }
    blockLoader();
    var active_languages_ids = [];
    active_languages.each(function () {
        active_languages_ids.push($(this).attr('data-pk'));
    });
    var source_language_id = $('#id_language_from').val();

    var summ_ul_targ_langs = $('#summary_target_languages > ul');
    summ_ul_targ_langs.empty();
    if ((words_count == '') || (words_count == 'NA')) {
        return
    }
    return $.post('/orders/languages-prices/', {
        'word_count': words_count,
        'language_from_id': source_language_id,
        'languages_to_ids': active_languages_ids
    }).done(function (response) {
        var estimated_price = response['estimated_price'];
        var items = response['items'];
        $.each(items, function (_, item) {
            var name = item['name'];
            var id = item['id'];
            var price = item['price'];
            var price_per_word = item['price_per_word'];
            summ_ul_targ_langs.append('<li>' + name + ': ' + price_per_word + ' x ' + words_count + ' = ' + price + '</li>');
        });
        $('#id_summary_price').text(estimated_price + ' €');
        console.log('DONE RSTL')


    });

}

您知道問題出在哪里嗎？

編輯

根據Anthonys的回答，我已將RTL更改為：

function refreshTargetLanguages() {
    console.log('RTL');
    var language_id = $('#id_language_from').val();
    var deferred = $.Deferred();
    if (language_id != '') {
        var request_url = '/orders/ajax/get-languages-to-exclude/';
        $.ajax({
            url: request_url,
            method: 'post',
            data: {'language_id': language_id}
        }).then(function(data){
            $('.class_target_languages').show();

            window.changeunbind = 1;

            $('.target_language_choice.active').trigger('click');

            window.changeunbind = 0;

            $.each(data, function (key, value) {
                hideTargetLanguageById(key);
            });
            console.log('DONE SUCCESS RTL');
            deferred.resolve();
        }, function(error){
            deferred.reject(error);
        });
    } else {
        console.log('call HATL');
        hideAllTargetLanguages();
        deferred.resolve();
    }
    return deferred.promise();
}

哪個也沒有幫助...

Answer 1

您應該將函數傳遞給then() ，但是您要在ajax之前執行函數

var rstl = refreshSummaryTargetLanguages()

應該

var rstl = refreshSummaryTargetLanguages

或者，您也可以將所有內容放到一行中refreshTargetLanguages().then(refreshSummaryTargetLanguages).then(unblockLoader);

可能與問題無關，我也將refreshTargetLanguages修改refreshTargetLanguages以便它返回一個承諾，直到記錄console.log('DONE SUCCESS RTL')

function refreshTargetLanguages() {
    console.log('RTL');
    var language_id = $('#id_language_from').val();
    var deferred = $.Deferred();
    if (language_id != '') {
        var request_url = '/orders/ajax/get-languages-to-exclude/';
        $.ajax({
            url: request_url,
            method: 'post',
            data: {'language_id': language_id}
        }).then(function(data){
            $('.class_target_languages').show();

            window.changeunbind = 1;

            $('.target_language_choice.active').trigger('click');

            window.changeunbind = 0;

            $.each(data, function (key, value) {
                hideTargetLanguageById(key);
            });
            console.log('DONE SUCCESS RTL');
            deferred.resolve();
        }, function(error){
            deferred.reject(error);
        });
    } else {
        console.log('call HATL');
        hideAllTargetLanguages();
        deferred.resolve();
    }
    return deferred.promise();
}