javascript - ajax 呼び出しが原因で、関数内の値が更新されない

Question

選択したケースに応じてはがきのビューを変更する JavaScript 関数を作成しています。

私の問題は、オブジェクト「m_case」の古い値が使用されていることです。クラス「case-btn」のボタンを 2 回押すと、ポストカード ビューで適切なケースが選択されます。しかし、ボタンを1回押すとトリガーされます。

m_case.setCase() 関数呼び出しでコールバック関数のようなことをしなければならないのでしょうが、うまく動かせず、

$('.case-btn').on('click', function() {
    remove_active_state_from_cases();

    m_case.setCase($(this).data('case'));

    // Changes the view of the postcard
    m_postcard.changeBackground(m_case.getPhoto());
    m_postcard.changeMessage(m_case.getMessageText());
    m_postcard.changeFullName(m_case.getFullName());
    m_postcard.changeCountry(m_case.getCountry());

    $(this).toggleClass('active');
});

setCase() 関数

this.setCase = function(id) {
    // Set ID
    this.setID(id);
    var that = this;

    $.ajax({
        url: 'get_case_by_id.php',
        type: 'get',
        dataType: 'json',
        data: {id: that.getID() },
        success: function(data) {
            if(data.success) {
                that.setFirstName(data.first_name);
                that.setFullName(data.full_name);
                that.setAdress(data.adress);
                that.setCountry(data.country);
                that.setStamp(data.stamp);
                that.setPhoto(data.photo);
                that.setSummary(data.summary);
                that.setStory(data.story);
                that.setMessageText(data.message_text);
                that.setDefaultMessageText(data.default_message_text);
                that.setMessageImg(data.message_img);
            } else {
                console.log('failure');
            }
        }

EDIT問題は私の AJAX 呼び出しにある可能性があります。ajax が呼び出されるまで待つ必要があります。しかし、Ajax が完了する前ではなく、完了したときに最初のフローを続行するにはどうすればよいでしょうか。

解決

コールバック パラメータを追加し、その関数を ajaxs complete 関数で呼び出すことで機能させました。

$('.case-btn').on('click', function() {
    remove_active_state_from_cases();
    var that = this;

    m_case.setCase($(this).data('case'), function() {

        m_postcard.changeBackground(m_case.getPhoto());
        m_postcard.changeMessage(m_case.getMessageText());
        m_postcard.changeFullName(m_case.getFullName());
        m_postcard.changeCountry(m_case.getCountry());

        $(that).toggleClass('active');
    }); 
});

// Sets the whole case from an id.
this.setCase = function(id, callback) {
    // Set ID
    this.setID(id);
    var that = this;

    $.ajax({
        url: 'get_case_by_id.php',
        type: 'get',
        dataType: 'json',
        data: {id: that.getID() },
        success: function(data) {
            if(data.success) {
                that.setFirstName(data.first_name);
                that.setFullName(data.full_name);
                that.setAdress(data.adress);
                that.setCountry(data.country);
                that.setStamp(data.stamp);
                that.setPhoto(data.photo);
                that.setSummary(data.summary);
                that.setStory(data.story);
                that.setMessageText(data.message_text);
                that.setDefaultMessageText(data.default_message_text);
                that.setMessageImg(data.message_img);
            } else {
                console.log('fail big time');
            }
        },
        complete: function() {
            callback();
        }
    });
}