Jquery execute in wrong sequence

Question

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

@adeneo Although related, I don't think this is a duplicate – sroes Nov 19 '13 at 14:15 — sroes, Nov 19 '13 at 14:15

score 6 · Answer 1 · answered Nov 19 '13 at 14:03

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

score 2 · Accepted Answer · answered Nov 19 '13 at 14:11

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

score 0 · Answer 3 · answered Nov 19 '13 at 14:03

0

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

answered Nov 19 '13 at 14:03

Swifty

1,422
2
18
38

score 0 · Answer 4 · answered Nov 19 '13 at 14:05

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

Jquery execute in wrong sequence

4 Answers4