Jquery execute in wrong sequence [duplicate]

Question

This question already has answers here:

How do I return the response from an asynchronous call? (43 answers)

Closed 8 years ago.

I have the sample as below. I always got "c" first before "a" and "b". How do I get "a","b" and "c" accordingly? I would appreciate for any advice.

b.extend({
        get: function (id) {

        jQuery.ajax({
            type: 'GET',
            url: url,
            data: pdata,
            success: function (result) {
                console.log("a");
            }
        });

        for (var a = 0; a < 5; a++) {
            jQuery.ajax({
                type: 'GET',
                url: url,
                data: pdata,
                success: function (result) {
                    console.log("b");
                }
            });
        }
        console.log("c");
        }
});

Answer 1

You can also use deferred:

b.extend({
    get: function (id) {

        var request = jQuery.ajax({
            type: 'GET',
            url: url,
            data: pdata
        }).then(function(result) {
            console.log("a");
            return result;
        });

        for (var a = 0; a < 5; a++) {
            request = request.then(function(result) {
                return jQuery.ajax({
                    type: 'GET',
                    url: url,
                    data: pdata
                }).then(function(result) {
                    console.log("b");
                    return result;
                });
            });
        }

        request.then(function() {
            console.log("c");
        });
    }
});

Answer 2

Try

put your code in success:

b.extend({
    get: function (id) {
        jQuery.ajax({
            type: 'GET',
            url: url,
            data: pdata,
            success: function (result) {
                console.log("a");
                for (var a = 0; a < 5; a++) {
                    jQuery.ajax({
                        type: 'GET',
                        url: url,
                        data: pdata,
                        success: function (result) {
                            console.log("b");
                            if (a === 5) {
                                console.log("c");
                            }
                        }
                    });
                }
            }
        });
    }
});

Answer 3

Do the call for C in the callback of B, and the call for B in the callback of A

Answer 4

jQuery is async, so some Ajax requests may finish before others.

b.extend({
    get: function (id) {

    var async = $.ajaxSetup()['async']; // store the current value of async to a variable

    $.ajaxSetup({'async':false}); // Set async to false

    jQuery.ajax({
        type: 'GET',
        url: url,
        data: pdata,
        success: function (result) {
            console.log("a");
        }
    });

    for (var a = 0; a < 5; a++) {
        jQuery.ajax({
            type: 'GET',
            url: url,
            data: pdata,
            success: function (result) {
                console.log("b");
            }
        });
    }
    console.log("c");

    $.ajaxSetup({'async': async }); // Set async to back to original value

    }
});

The only downside to this is that your page will 'hang' until the request is completed