0

我正在编写一个 javascript 函数，它应该根据选择的情况更改明信片的视图。

我的问题是对象“m_case”的旧值正在被使用。如果我按“case-btn”类的按钮两次，我会在明信片视图中选择正确的案例。但是我希望在我按下一次按钮时触发它。

我想我必须在 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');
            }
        }

编辑问题可能出在我的 AJAX 调用中，我必须等到调用 ajax。但是当我的 Ajax 完成而不是之前，我如何继续第一个流程？

解决方案

我通过添加一个回调参数并在 ajaxs 完整函数中调用该函数来使其工作。

$('.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();
        }
    });
}
4

1 回答 1

1

您m_postcard.changeBackground和其他调用应该在success回调中，或者在从成功回调调用的另一个函数中，因为在异步 ajax 调用完成之前不会设置这些值。

以您的代码现在的方式，在您的函数执行完成m_postcard.changeBackground后立即调用其他调用。setCase这意味着您的方法在数据从服务器到达之前执行

当 ajax 正在处理时，您可能应该在屏幕上显示一条加载消息，让用户知道他们必须等到处理完成。在调用调用之前显示消息.ajax并将其隐藏在成功/错误回调中。

对站点内容的任何更改都应从成功回调中完成，即更改active状态、更改内容等。

于 2013-08-19T16:01:33.710 回答