Jak sprawić, by jQuery czekało na zakończenie połączenia Ajax, zanim powróci?

Nie używam $.ajax, ale funkcji $.post i $.get, więc jeśli muszę czekać na odpowiedź, używam tego:

$.ajaxSetup({async: false});
$.get("...");

Podstawowy obiekt XMLHttpRequest (używany przez jQuery do wykonania żądania) obsługuje właściwość asynchroniczna. Ustaw na false . Jak

async: false

Zamiast ustawiać async na false, co jest zwykle złym projektem, warto rozważyć zablokowanie interfejsu użytkownika, gdy operacja jest w toku.

Można to ładnie osiągnąć dzięki obietnicom jQuery w następujący sposób:

// same as $.ajax but settings can have a maskUI property
// if settings.maskUI==true, the UI will be blocked while ajax in progress
// if settings.maskUI is other than true, it's value will be used as the color value while bloking (i.e settings.maskUI='rgba(176,176,176,0.7)'
// in addition an hourglass is displayed while ajax in progress
function ajaxMaskUI(settings) {
    function maskPageOn(color) { // color can be ie. 'rgba(176,176,176,0.7)' or 'transparent'
        var div = $('#maskPageDiv');
        if (div.length === 0) {
            $(document.body).append('<div id="maskPageDiv" style="position:fixed;width:100%;height:100%;left:0;top:0;display:none"></div>'); // create it
            div = $('#maskPageDiv');
        }
        if (div.length !== 0) {
            div[0].style.zIndex = 2147483647;
            div[0].style.backgroundColor=color;
            div[0].style.display = 'inline';
        }
    }
    function maskPageOff() {
        var div = $('#maskPageDiv');
        if (div.length !== 0) {
            div[0].style.display = 'none';
            div[0].style.zIndex = 'auto';
        }
    }
    function hourglassOn() {
        if ($('style:contains("html.hourGlass")').length < 1) $('<style>').text('html.hourGlass, html.hourGlass * { cursor: wait !important; }').appendTo('head');
        $('html').addClass('hourGlass');
    }
    function hourglassOff() {
        $('html').removeClass('hourGlass');
    }

    if (settings.maskUI===true) settings.maskUI='transparent';

    if (!!settings.maskUI) {
        maskPageOn(settings.maskUI);
        hourglassOn();
    }

    var dfd = new $.Deferred();
    $.ajax(settings)
        .fail(function(jqXHR, textStatus, errorThrown) {
            if (!!settings.maskUI) {
                maskPageOff();
                hourglassOff();
            }
            dfd.reject(jqXHR, textStatus, errorThrown);
        }).done(function(data, textStatus, jqXHR) {
            if (!!settings.maskUI) {
                maskPageOff();
                hourglassOff();
            }
            dfd.resolve(data, textStatus, jqXHR);
        });

    return dfd.promise();
}

Z tym możesz teraz zrobić:

ajaxMaskUI({
    url: url,
    maskUI: true // or try for example 'rgba(176,176,176,0.7)'
}).fail(function (jqXHR, textStatus, errorThrown) {
    console.log('error ' + textStatus);
}).done(function (data, textStatus, jqXHR) {
    console.log('success ' + JSON.stringify(data));
});

I interfejs użytkownika zostanie zablokowany, dopóki Komenda ajax nie zwróci

Zobacz jsfiddle

Myślę, że byłoby łatwiej, gdybyś kodował swoją funkcję success, aby załadować odpowiednią stronę zamiast zwracać true lub false.

Na przykład zamiast zwracać true można zrobić:

window.location="appropriate page";

W ten sposób, gdy funkcja success zostanie wywołana, strona zostanie przekierowana.

W nowoczesnym JS możesz po prostu użyć async/await, like:

  async function upload() {
    return new Promise((resolve, reject) => {
        $.ajax({
            url: $(this).attr('href'),
            type: 'GET',
            timeout: 30000,
            success: (response) => {
                resolve(response);
            },
            error: (response) => {
                reject(response);
            }
        })
    })
}

Następnie wywołaj go w async funkcji jak:

let response = await upload();

Ponieważ nie widzę tego tutaj, pomyślałem, że zwrócę również uwagę, że instrukcja jQuery when może być bardzo przydatna w tym celu.

Ich przykład wygląda tak:

$.when( $.ajax( "test.aspx" ) ).then(function( data, textStatus, jqXHR ) {
  alert( jqXHR.status ); // Alerts 200
});

Część "then" zostanie wykonana dopiero po zakończeniu części" when".

Powinno poczekać, aż żądanie zostanie zakończone. Następnie zwrócę get request body, z którego wywołana jest funkcja.

function foo() {
    var jqXHR = $.ajax({
        url: url,
        type: 'GET',
        async: false,
    });
    return JSON.parse(jqXHR.responseText);  
}

Ponieważ async ajax jest przestarzały, spróbuj użyć zagnieżdżonych funkcji asynchronicznych z obietnicą. Mogą wystąpić błędy składniowe.

async function fetch_my_data(_url, _dat) {

   async function promised_fetch(_url, _dat) {

      return new Promise((resolve, reject) => {
         $.ajax({
            url:  _url,
            data: _dat,
            type: 'POST',
            success: (response) => {
               resolve(JSON.parse(response));
            },
            error: (response) => {
               reject(response);
            }
         });
      });
   }

   var _data = await promised_fetch(_url, _dat);
   
   return _data;
}

var _my_data = fetch_my_data('server.php', 'get_my_data=1');