CODEWITHSUNDEEP
javascriptjqueryajaxasynchronoussynchronization
GRTZ
GRTZ

Reputation: 433

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

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'
    });
}

Upvotes: 0

Views: 2523

Answers (2)

dfsq
dfsq

Reputation: 193311

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);
});

Upvotes: 2

Hovhannes Babayan
Hovhannes Babayan

Reputation: 382

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

Upvotes: -1

Related Questions