I've got into a small trouble here. In my document.ready function I've defined an object and that object is being populated by three different ajax calls(inside document.ready). Now I want to do a
console.log(myObject);
only when the 3 async calls have been executed completely. Please suggest a way to do this.
Using I would suggest you to create a function like this:
function onAllInformationIsReady() {
console.log(myObject);
}
function isAllInformationReady() {
// verify here if you have all the information
}
and you do something like this on your ajax calls (I'm not assuming you are using jQuery here, replace with your ajax call method)
$.ajax({
type: "POST",
url: "some.php",
data: "...n",
success: function(msg){
if(isAllInformationReady())
onAllInformationIsReady();
}
});
By the way, if you are using jQuery you can make synchronous ajax calls like this:
$.ajax({
type: "POST",
url: "some.php",
data: "...n",
async: false,
success: function(msg){
}
});
Try jQuery 1.5's new "deferred" objects:
var j1 = $.ajax(...);
var j2 = $.ajax(...);
var j3 = $.ajax(...);
j1.success(function(data) {
// do something with data
});
j2.success(function(data) {
// do something with data
});
j3.success(function(data) {
// do something with data
});
$.when(j1, j2, j3).done(function() {
console.log(myObject);
});
The three .success() functions will be called asynchronously and will populate myObject, and then the done function will only be invoked by $.when() once all three AJAX requests have been completed.
