execute function on completion of another, use ajaxComplete()?

Question

Hi there, two functions need to be executed in Javascript, the second one only after the first has finished.

The first populates an array with getJSON, and the second will then manipulate it.

However, getJSON is asynchronous, thus it will not pause the order of execution to make the program work properly so that the array finishes loading before the second function can execute. How can one use Jquery's ajaxComplete() or else the getJSON callback to simply run the second function once the data has finished loading via getJSON.

Thanks.

---

here is the code:

function fetch_ids(user) 
var url = 'http://test.com/ids/' + escape(user) + '.json?callback=?';
// populate array ids[] with JSON data --uid[] array declared globally
$.getJSON(url, function(data) {
for( var i = 0; i < data.length; i++ ) ids[i] = data[i];
});
// test array and run alert
for(i=0;i<uid.length;i++){
for(j=0;j<ids.length;j++){
if(uid[i]==ids[j])
{alert('matched: ' + uid[i]);}
}
}
// finish test
}

Answer 1

Wouldn´t this work?

$.getJSON(url, params, function (jsonData){
  // populate array
  // call 2nd function.
});

Worst case, if you have your 2 funcions already defined elsewhere:

$.getJSON(url, params, function (jsonData){
  firstFunction(jsonData);
  secondFunction(jsonData);
});

Answer 2

Check this similar post... How to initiate another jQuery .ajax call based on the result from an initial .ajax call?

The trick is to put the second call in the success function of the first call.