Ajax async : false freezes web page during loading in slow network

Question

I use jquery AJAX for web page and use async : false option as following. My client's network is very slow. When I try to load the web page from the server web page is slow and all the controls are freeze. Is that "async:false" matter? here my code

function ajaxRequestWithNoArguments(url) {
    return $.ajax({
        url: urlForPhp + '/' + url,
        data: '',
        dataType: 'JSON',
        async: false,
        method: 'POST'
    });
}

Of course, because you are using `async: false,`. This is expected behavior for one-threaded environment. Remove it and design your code properly without need for async: false. — dfsq, Sep 15 '15 at 05:30
@Micaela it's both type and method, method was added in 1.9. — dfsq, Sep 15 '15 at 05:45

score 2 · Answer 1 · edited Sep 15 '15 at 05:49

When I try to load the web page from the server web page is slow and all the controls are freeze. Is that "async:false" matter?

Yes, this is exactly why you should not use async:false, it's used in very specific cases and sounds like you don't need it. Making the request synchronous means that browser will pause program execution (freeze all UI too) until the request is done, the data is loaded back and processed. You don't wan't it in most cases, that's why you need to use default async: true.

function ajaxRequestWithNoArguments(url) {
    return $.ajax({
        url: urlForPhp + '/' + url,
        data: '',
        dataType: 'JSON',
        method: 'POST'
    });
}

Returning a promise object is convenient way to deal with asynchronous function. In this case you would use ajaxRequestWithNoArguments as follows:

ajaxRequestWithNoArguments('/some/url').then(function(response) {
    console.log('Data loaded', response);
});

Yes, but it's not the `then` which "fixes" the problem, it's making request asynchronous by removing `async: false`. Then you could use callback or promise pattern. Also take a look at this: http://stackoverflow.com/questions/14220321/how-to-return-the-response-from-an-asynchronous-call — dfsq, Sep 15 '15 at 06:14

score -1 · Answer 2 · answered Sep 15 '15 at 05:45

function OpenAjax(link, form_id)
        {
            document.getElementById("page-wrapper").innerHTML = "";
            $.ajaxSetup({ async: true });
            $("#page-wrapper").load(link, function(){
                $("#" + form_id).validator();
            });               
        }

This is my code. I had the same issue and setting it to true will fix it. When set it to true another problem may occur. Your javascript code will continue to work and if you have a response text you must tell JQuery to run your code after response, as in my example:

$("#" + form_id).validator();

This code works after response, but if I write my code this way

  function OpenAjax(link, form_id)
            {
                document.getElementById("page-wrapper").innerHTML = "";
                $.ajaxSetup({ async: true });
                $("#page-wrapper").load(link, function(){
                 //Code moved from this line  
                }); 
                //Here
                $("#" + form_id).validator();              
                }

$("#" + form_id).validator(); - code will work before Ajax response

Ajax async : false freezes web page during loading in slow network

2 Answers2