Ожидание ответа ajax той же функции

Question

Я знаю, что подобные вопросы были опубликованы много раз, однако я прочитал многие из них и не могу найти ответ на свою проблему.

У меня есть функция, которая ждет ответа на запрос ajax. Многие из вас спросят почему? Ну, я использую плагин Wizard Jquery, который выполняет функцию onLeaveAStepFunction если шаг оставлен, то мастер переходит к выбранному шагу, если возвращаемое значение из onLeaveAStepFunction правда; иначе это остается в том же шаге.

Я делаю это async: false для ожидания, и это работает, но это плохой дизайн. Кроме того, я не могу использовать плагин blockUI.

Как я могу это сделать?

Некоторый код:

Инициализация мастера:

$("#wizard").smartWizard({
        onLeaveStep : onLeaveStepFunction,
    });

Вызов запроса ajax:

function onLeaveStepCallback(obj, context) {
    nextStep = sendForm();
}

Запрос Ajax:

var nextStep = false;
$.ajax({
    url : path,
    type : "POST",
    async : false,
    data : $("#" + idForm).serialize(),
    success : function(data) {
        $("#" + idDiv).html(data);
        nextStep = !$("#" + idHiddenErrores).val())
    }
});

Опуская атрибуты. Пожалуйста, помогите мне.

Answer 1

Один хакерский обходной путь - сделать это перед отъездом. Возможно на showStep:

var wizard_next_step;
$("#wizard").smartWizard({
    onShowStep : function (obj, context) {
        onLeaveStepFunction(obj, context, function(nextStep){
            wizard_next_step = nextStep;
        });
    },
    onLeaveStep : function () {
        return wizard_next_step;
    }
});

Вам также необходимо изменить ваш onLeaveStepFunction принять обратный звонок:

function onLeaveStepCallback(obj, context, callback) {
    nextStep = sendForm(callback);
}

И ваша функция ajax должна быть:

$.ajax({
    url : path,
    type : "POST",
    async : false,
    data : $("#" + idForm).serialize(),
    success : function(data) {
        $("#" + idDiv).html(data);
        callback( !$("#" + idHiddenErrores).val()) );
    }
});

Теперь, похоже, вы рисуете в окне мастера с этим:

$("#" + idDiv).html(data);

Я полностью уверен, что это так. Но если это так, то вы не можете сделать это здесь (очевидно, потому что это onShowStep который переписал бы текущий контент). Если это так, вы должны передать данные в обратный вызов:

success : function(data) {
    callback( data , !$("#" + idHiddenErrores).val()) );
}

Напишите мастера так:

var wizard_next_step;
var wizard_data;
$("#wizard").smartWizard({
    onShowStep : function (obj, context) {
        onLeaveStepFunction(obj, context, function(data, nextStep){
            wizard_data = data;
            wizard_next_step = nextStep;
        });
    },
    onLeaveStep : function (obj, context) {
        $("#" + idDiv).html(wizard_data);
        return wizard_next_step;
    }
});

Ключ заключается в том, чтобы вызывать все асинхронные функции и получать данные задолго до того, как вы вызовете все свои синхронные функции.

Примечание: я не знаю умного мастера и не являюсь серьезным пользователем jQuery. Ответ выше основан на моих двух минутах чтения документации умного мастера на github и моем понимании javascript. Вам обязательно нужно изменить мои примеры, чтобы это работало.

Answer 2

Я делаю это async: false для ожидания, и это работает, но это плохой дизайн, и я не могу использовать плагин blockUI.

Если ваш мастер не разработан лучше и не поддерживает асинхронные обратные вызовы (например, возвратные обещания), async:false твой единственный выбор.

Подумайте о переключении на другого мастера и не забудьте сообщить об ошибке для плагина, который вы используете в данный момент.

Answer 3

Вы можете использовать метод ожидания jQuery. Я взял пример со страницы документации, чтобы подчеркнуть, как вы это сделаете:

$.when( $.ajax( "/request.php" ) ).done(function( response ) {
        // response argument resolved from ajax requests
        // process any work after ajax call finishes
}

Ссылка на страницу документации:

http://api.jquery.com/jquery.when/