Wait for Ajax call to finish - ajax

Question

I have a situation where in I m doing a number of AJAX calls using jquery and in turn returning JSON data from those calls into some variables on my page.
The issue is that the Ajax call takes a little time to get processed and in the mean time my control shifts to next statement where I intend to use the output of AJAX call.
Since the call takes time to return the data I am left with empty object that fails my function.
is there any way where I can wait for the finish of AJAX call to happen and proceed only when the result is returned from the call???
so this is my code where in I am trying to return transactionsAtError to some other jquery file where the control shifts to next statement before this call gets executed
this.GetTransactionAtErrors = function (callback) {
var transactionsAtError;
$.ajax({
url: ('/Management/GetTransactionsAtError'),
type: 'POST',
cache: false,
success: function (result) {
if (result && callback) {
transactionsAtError = (typeof (result) == "object") ? result : $.parseJSON(result);
}
}
});
return transactionsAtError;
}

Answer 1

Assuming you are using jQuery's $.getJSON() function, you can provide a callback function which will be executed once the data is returned from the server.
example:
$.getJSON("http://example.com/get_json/url", function(data){
console.log("the json data is:",data);
});
EDIT:
After seeing the code you added i can see what's your problem.
Your return transactionsAtError; line runs independently of the ajax call, i.e it will run before the ajax is complete.
you should just call your callback inside your success: function.
example:
this.GetTransactionAtErrors = function (callback) {
$.ajax({
url: ('/Management/GetTransactionsAtError'),
type: 'POST',
cache: false,
success: function (result) {
if (result && callback) {
var transactionsAtError = (typeof (result) == "object") ? result : $.parseJSON(result);
callback(transactionsAtError);
}
}
});
}

Answer 2

When you have your result in scope you can check wait for ongoin ajax calls to finish by using es6 promise:
function ajaxwait()
{
return(new Promise(function(resolve, reject) {
var i = setInterval(function() {
if(jQuery.active == 0) {
resolve();
clearInterval(i);
}
}, 100);
}));
}
You can use this like.
ajaxwait().then(function(){ /* Code gets executed if there are no more ajax calls in progress */ });
Use an es6 shim like this https://github.com/jakearchibald/es6-promise to make it work in older browsers.