Question

Hi
I am trying to call two user defined functions and expecting the first one has to execute first and then the second one.. but they are executing simultaneously.

$.firstfunc = function(){
//Do something
//jQuery.ajax({
});

$.secondfunc = function(){
//Do something
jQuery.ajax({
});

$.(document).ready(function(){
$.firstfunc();
$.secondfunc();
});

any help would be appreciated.

Thanks!

Answer 1

Warning: Requires jQuery 1.5+

$.firstfunc = function() {
  return $.ajax({});
}

$.secondfunc = function() {
  return $.ajax({});
}

$(function() {
  $.when($.firstfunc).then($.secondfunc);
});

Using the black magic of $.Deferred‘s and $.when.

It basically says when you first function finishes its ajax call then call the second function.

This is because $.ajax returns a jqXHR object which inherits from $.Deferred.

If you want to attach a callback when both $.firstfunc and $.secondfunc complete then you can do the following (requires jQuery 1.6):

$(function() {
  $.first().pipe($.second).done(function(second_data) {
    // both finished.
  });
});

Legacy: jQuery 1.4.2 & 1.3.2 support.

$.firstfunc = function(cb) {
  $.ajax({
    success: function() {
      ...
      cb();
    },
    ...
  });
}

$.secondfunc = ...

$(function() {
  $.firstfunc($.secondfunc);
});