Jquery execute in wrong sequence [duplicate] - ajax

Question

This question already has answers here:
How do I return the response from an asynchronous call?
(41 answers)
Closed 9 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

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 2

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 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