Можно ли это сделать без синхронного AJAX?

Question

Я хочу изменить свой следующий код с синхронного на асинхронный AJAX по соображениям производительности.Это возможно?Я обнаружил, что почти все мои вызовы AJAX являются синхронными, поэтому я чувствую, что мне не хватает шаблона проектирования.В общем, если вам нужно отобразить данные, которые возвращаются с сервера, то вам не нужно ждать (async: false) ответа сервера с данными, прежде чем вы сможете продолжить?

В кодениже, к элементу a.popup привязаны два обработчика click.Первый - это лайтбокс (не показан), а второй - код, показанный ниже.Я пытался сделать это без "async: false", но это не работает.

function completed_investment($inputs) {

        var result;

        jQuery.ajax({
            type: 'POST',
            url: '/ajax/completed_investment',
            dataType: 'json',
            data: $inputs,
            async: false,          // need to wait until get result.
            success: function(data) {
                result = data;
            }
        });
        return result;
}


// AJAX - Completed
jQuery('a.open-popup').click(function(){
    var $parent = jQuery(this).parent();
    var $InvestmentID = $parent.siblings('input').attr('value');
    var $inputs;
    var $outputs;

    $inputs = { 'InvestmentID' : $InvestmentID };
    $outputs = completed_investment($inputs);

    // If an investment was completed, update HTML
    if ($outputs.state == 'Begin')
    {

        $parent.siblings('.plan-msg').remove();
        $parent.removeClass('completed-button')
                    .addClass('add-inv-button ')
                    .html('+ Add to Your Plan');
        $newpoints = '(+' + $outputs.points + " " + $outputs.plural + ")";
        $parent.siblings('.done-points').removeClass('done-points')
                                        .addClass('add-points')
                                        .html($newpoints);
    }
});

Answer 1

Ваши инстинкты верны: не выполняет синхронный AJAX. Вместо этого поместите код, который ожидает "результат" внутри обратного вызова "success"!

jQuery('a.open-popup').click(function(){
    var $parent = jQuery(this).parent();
    var $InvestmentID = $parent.siblings('input').attr('value');
    var $inputs;
    var $outputs;

    $inputs = { 'InvestmentID' : $InvestmentID };
    $outputs = completed_investment($inputs, function($outputs) {
      if ($outputs.state == 'Begin')
        {

          $parent.siblings('.plan-msg').remove();
          $parent.removeClass('completed-button')
                .addClass('add-inv-button ')
                .html('+ Add to Your Plan');
          $newpoints = '(+' + $outputs.points + " " + $outputs.plural + ")";
          $parent.siblings('.done-points').removeClass('done-points')
                                    .addClass('add-points')
                                    .html($newpoints);
         }
    });

Затем измените функцию, которая вызывает AJAX:

function completed_investment($inputs, whenFinished) {

    var result;

    jQuery.ajax({
        type: 'POST',
        url: '/ajax/completed_investment',
        dataType: 'json',
        data: $inputs,
        async: false,          // need to wait until get result.
        success: function(data) {
            whenFinished(data);
        }
    });
}

Основная идея JavaScript состоит в том, что, поскольку так просто , просто обернуть несколькокод в анонимной функции и бросить его, нет необходимости иметь код "ждать", как вы описываете.Вместо этого вы просто упаковываете работу и передаете ее сервисной функции для использования в качестве обработчика событий.Когда HTTP-запрос завершается, это вхождение вызовет событие, и ваш обработчик вызывается.Из-за правил области видимости в JavaScript локальные переменные, доступные для вашего кода, по-прежнему доступны точно так же, как они были установлены при передаче функции-обработчика в механизм AJAX.

Answer 2

Попробуйте это (не проверено):

function completed_investment($inputs) {
    jQuery.ajax({
        type: 'POST',
        url: '/ajax/completed_investment',
        dataType: 'json',
        data: $inputs,
        async: false,          // need to wait until get result.
        success: function($outputs) {
            // If an investment was completed, update HTML
            if ($outputs.state == 'Begin')
            {

                $parent.siblings('.plan-msg').remove();
                $parent.removeClass('completed-button')
                            .addClass('add-inv-button ')
                            .html('+ Add to Your Plan');
                $newpoints = '(+' + $outputs.points + " " + $outputs.plural + ")";
                $parent.siblings('.done-points').removeClass('done-points')
                    .addClass('add-points')
                    .html($newpoints);
            }
        }
    });
    // Notice: no return value
}


// AJAX - Completed
jQuery('a.open-popup').click(function(){
    var $parent = jQuery(this).parent();
    var $InvestmentID = $parent.siblings('input').attr('value');
    var $inputs;

    $inputs = { 'InvestmentID' : $InvestmentID };
    completed_investment($inputs);
});