javascript - Run code on completion of AJAX within an AJAX - JQuery -

i have ajax call retrieves data , on success of it, runs loop , runs functions run more ajax calls.

code:

success: function(data){                 // first make sure data found                 console.log(data);                 if(data["status"] == "found")                 {                     // create needed array single string                     var restrictionarray = data["data_retrieved"].split(',');                      loop_amount = restrictionarray.length; //<!-- amount looped building forms                     //var action = this.elevation.getactionsbyoptionid(option.getid())[i];                     for(var j = 0; j < loop_amount; j++)                     {                         var editrowrestriction = optionrules.prototype.geteditrowrestriction(j);                         var check = $(editrowrestriction).find("select");                          console.log(check[0]);                          var editrowrestirction_select_ability = optionrules.prototype.geteditrowrestriction_select_ability(j);                         //var editrowrestirction_access_ability = optionrules.prototype.geteditrowrestriction_access_ability(j);                          editrowrestriction.onremove = function()                         {                             $(this).next().empty(); <!-- restriction select ability remove                             //$(this).next().next().empty(); <!-- restriction access ability remove                             $(this).empty();                              //var action = this.action;                             //that.removeaction(action);                         }                         tbody.appendchild(editrowrestriction);                         tbody.appendchild(editrowrestirction_select_ability);                         console.log(check[1]);                     }                 }             },             error:function(){                 alert("an error occured, please try again.");             } 

heres problem, inside for loop; methods link method invokes ajax call. happens here before ajax call's finish, loop continuing , methods being called. want stop loop until methods have returned based on ajax call's being finished. , invoke last 2 lines of code within loop:

tbody.appendchild(editrowrestriction); tbody.appendchild(editrowrestirction_select_ability); 

what best approach accomplishing this?

suggestions, thoughts?

you modify calls $.ajax within loop execute synchronously, rather asynchronously. (see question how can jquery perform synchronous, rather asynchronous, ajax request?.) have effect of "pausing" loop while inner ajax calls execute. straightforward approach, have disadvantage of locking user's browser while ajax requests execute.

the alternative break code loops pieces, complete processing loop in callback function invoked after inner-ajax calls have completed.