How to make jQuery functions sequential

Question

I have the following code:

$(document).ready(function() {
  loadStuff(someURL, someID);
  showStuff('foo');
});

showStuff() relies on content generated by loadStuff() but it seems as if showStuff() is jumping the gun before said content is available. How can I force them to run sequentially?

Update: Yes, there are ajax calls in loadStuff but unfortunately they're jsonp so can't be called synchronously.

Answer 1

rewrite it as:

$(document).ready(function() {
  loadStuff(someURL, someID, function() { showStuff('foo'); });
});

where the third parameter of loadStuff is the callback to call after the content is loaded

Answer 2

The elegant way is using jQuery.Deferred, in particular Deferred.pipe. See the question Understanding jQuery Deferred.pipe() for an example.