I find it weird that I get this output:
Wait..
Request 2 Complete.
Request 2 Complete.
On a simple for loop:
for (var i = 0, j = urls.length; i < j; i += 1) {
$.ajax({
url: urls[i],
dataType: 'jsonp',
complete: function() {
log.append('Request ' + i + ' Complete.' + "\n");
if (i == (j - 1)) {
log.append('Done.');
}
}
});
}
How come i is always equal to 2?
This is, because both calls to i inside your ajax request reference the same i of the for-loop. At the point in time, when the requests are completed (and thus i is accessed) the loop has terminated and i has the final value, here 2.
I think you look for something like this:
for (var i = 0, j = urls.length; i < j; i += 1) {
!function( i ){
$.ajax({
url: urls[i],
dataType: 'jsonp',
complete: function() {
log.append('Request ' + i + ' Complete.' + "\n");
if (i == (j - 1)) {
log.append('Done.');
}
}
});
}( i );
}
By passing the value of i to the immediately executed function, you create a copy of the respective value of i to use inside the ajax-requests.
try using
async = false;
in ajax request
