How can i pass the execution until i get the response from nested webservice calls

steps: 1. get the roster(students) json data includes name,profile url from a web service 2. process the data and get profile image of each user via web service call by passing profile url 3. show the name and image of each user in window

while processing the data i need to pause the execution until i get image from 2nd web service call. Tried with call back but couldn't achieve it.

below is the code snippet

//get roster data from web service:1
function getRosterData(callback) {
 
    var rosterToolURL; // json web service url
 
    var xhrRosterTools = Ti.Network.createHTTPClient({
        onload : function() {
            var rosterJsonData = JSON.parse(this.responseText);
            //pass response to callback
            callback(rosterJsonData);
        },
        onerror : function(e) {
            Ti.API.info("STATUS: " + this.status);
 
        },
    });
 
    xhrRosterTools.open("GET", rosterToolURL);
    xhrRosterTools.send();
}
 
//process the roster data and call getUserImage for each row
function rosterWIndow(rosterJsonData) {
 
    var roster_collection = rosterJsonData.roster_collection;
    for ( i = 0; i < roster_collection.length; i++) {
        var rosterInfo = roster_collection[i];
        var imageURL = rosterInfo.imageUrl;
        //call get user
        getUserImage(imageURL, function(imageData) {
            Ti.API.info('after call back2' + imageData);
 
        });
 
    }
 
}
 
//get image from web service:2
function getUserImage(imageURL) {
    var xhrinfo = Ti.Network.createHTTPClient({
        onload : function() {
            Ti.API.info('response data' + this.responseData);
            return this.responseData;
        },
        onerror : function(e) {
            Ti.API.info("STATUS: " + this.status);
 
        },
    });
 
    xhrinfo.open("GET", imageURL);
    xhrinfo.send();
}
getRosterData(rosterWIndow);