execute function only when another has finished javascript/jquery - php

Question

i have an application that runs continuously and updates itself if needed. It uses ajax to call a php file that will check some data on the database, if it has changed then we update the screen. The php seems to work just fine its the js that i'm having a problem with.
$(document).ready(function () {
$('.trade_window').load('signals.php?action=init', setInterval(function () {
for(var i = 1; i < 6; i++) {
console.log('market_name_' + i + " is " + $('.market_name_' + i).text().trim());
$.ajax({
url: 'signals.php?action=check&param=' + JSON.stringify({
'market_number': i,
'market_name': ('.trade_window .market_name_' + i).text().trim(),
'trade_type': $('.trade_window .status_' + i).text().trim(),
'trade_start_price': '1.1234',
'trade_open_time': '18:21:02'
}),
type: 'GET',
success: function (result) {
if(result.trim() === "false") {
console.log("RESULT IS " + result.trim());
} else {
$('.trade_window #market_1').html(result);
setTimeout(function () {
// This is to make it a little more visible
console.log(" ");
console.log(" ");
console.log("PAUSE!!!!");
console.log(" ");
console.log(" ");
}, 5000);
}
}
});
};
}, 2000));
});
So, what happens in the application is there are 6 elements (divs) within these we have a few pieces of information, these are compared with the data on the DB if they're different then the DB information needs to be shown.
Now the script above checks each element and then updates if it is needed, the problem is that the ajax call is done in the background and all the other stuff is executed while we're waiting for the ajax calls to complete so by the time tthey have completed the for loop is at the end so only element 6 will be updated even if element 1, 2, 3, 4 or 5 are changed.
What can i do to change this? is there a js/jquery method that can be used to check if the php file has finished loading?
Thanks for your time.

Answer 1

Collect the deferred (promise) return value of your $.ajax calls:
var def = [];
for (var i = 1; i < 6; ++i) {
def[i - 1] = $.ajax({ ... });
}
and then outside the loop use $.when() to wait for them all to complete:
$.when.apply($, def).done(function(r1, r2, r3, ...) {
...
});