Calling one jQuery function only after another function has run

Sometimes it may be necessary to force one jQuery function to run only after another has finished. To do this you need to use the jQuery deferred method.

Here is a simple example of how to do it:

var functionOne = function() {
  var r = $.Deferred();
  // Do your whiz bang jQuery stuff here
  console.log('Function One');
  return r;
};
var functionTwo = function() {
  // Do your whiz bang jQuery stuff here
  console.log('Function Two');
};
// Now call the functions one after the other using the done method
functionOne().done( functionTwo() );