Ajax call freeze while process request from callback function

Question

I have created a common ajax call function for my application for optimizing code. the problem is while I call the function its freeze page. Please check below JS:

$(fuction(){
    $('.btn').click(function(){
        var data = getData('myaction/getinfo', []);
    })
});

function getData(url, data) {
    var result = "";
    $.ajax({
        url: url,
        type: 'POST',
        async: false,
        data: data,
        error: function () {
            console.log('error');
            $('.custom-loader').fadeOut("slow");
        },
        beforeSend: function () {
            $('.custom-loader').fadeIn("slow");
        },
        complete: function () {
            $('.custom-loader').fadeOut("slow");
        },
        success: function (res, status) {
            result = res;
            $('.custom-loader').fadeOut("slow");
        }
    });
    return result;
}

While I click a button, ajax request working pretty well but loader not showing until ajax return response (unable to click until response return).

If I on async with async: true this will continue execution code which breaks functionality (Next execution depend on ajax response). Can anyone help me with this?

Thanks an advance!

Check how the request is going in the Network tab of the devtools. It should show you the timing of the request — yaakov, Dec 27 '18 at 06:00
`async: false` will stop the code execution and as of that freez the window, until the request is completed, that's how it is specified. So there is no way around using `async: true` and rewriting your code so that it will work with async functions. — t.niese, Dec 27 '18 at 06:04
Thanks for the guidance @YaakovAinspan and @t.niese! got the solution! — Geee, Dec 27 '18 at 06:12

score 1 · Accepted Answer · answered Dec 27 '18 at 06:07

The solution to asynchronous operations is callbacks (unless you use es6 async/await). This means that instead of expecting functions to return values you pass them callbacks, which are functions that take as a parameter the return value.

In your case this would look like,

$(function(){
    $('.btn').click(function() {
        getData('myaction/getinfo', [], function(res){
            console.log(res);
        });
    })
});

function getData(url, data, callback) {
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        error: function () {
            console.log('error');
            $('.custom-loader').fadeOut("slow");
        },
        beforeSend: function () {
            $('.custom-loader').fadeIn("slow");
        },
        complete: function () {
            $('.custom-loader').fadeOut("slow");
        },
        success: function (res, status) {
            $('.custom-loader').fadeOut("slow");
            callback(res);
        }
    });
}

Thank you my friend, It's working cool! – Geee Dec 27 '18 at 06:14 — Geee, Dec 27 '18 at 06:14

score 1 · Answer 2 · answered Dec 27 '18 at 06:10

You should get use to the "callback" mechanisim in Javascripts. Just call your post processing method in the "success" event handler.

$(fuction(){
    $('.btn').click(function(){
        getData('myaction/getinfo', []);
    })
});

function postProcessing(data){
    //Put your processing logic here. e.g. Populate the data on the screen control
}

function getData(url, data) {
    $.ajax({
        url: url,
        type: 'POST',
        data: data,
        error: function () {
            console.log('error');
            $('.custom-loader').fadeOut("slow");
        },
        beforeSend: function () {
            $('.custom-loader').fadeIn("slow");
        },
        complete: function () {
            $('.custom-loader').fadeOut("slow");
        },
        success: function (res, status) {
            $('.custom-loader').fadeOut("slow");
            postProcessing(res);
        }
    });
}

Ajax call freeze while process request from callback function

2 Answers2