ajax - jQuery run one group of functions after another -

i have 2 groups of functions:

$(document).ready(function() {      var id = $(this).attr('id');      // first group of functions         getcountry(id);      // second group of functions       getresult(id, 'all');  }); 

within each group, functions ajax calls , chained together. means getcountry() run first , calls getregion() on success ajax property, getregion() calls gettown() on success ajax property , on. these functions used fill form dropdown lists (selects). towns of region of country have selected.

i need form lists filled before run getresult() function.

i don't want call getresult() inside getcountry() because have call getresult() if user changes selected options after page loaded. in case getresult() take various parameters other 'all'.

i'm looking simple way re-write $(document).ready(function() in order say:

1. first: run getcountry() , depending functions
2. then run getresult() , depending functions

i'm getting bit lost in jquery doc callbacks , promise(). appreciate allow me going ahead, knowing come doc later on.

you can try using deferred object

// create deferred object var deferred = $.deferred(); 

define function called on deferred object resolution

// function executes deferred object gets resolved deferred.done(function(value) {    getresult(id, 'all'); }); 

on callback of last function of getcountry() group, resolve deferred object:

// resolve deferred object deferred.resolve(response); 

check article