wait for ajax response inside a loop

Question

I need to wait for an ajax response inside a for loop. If I could I'd simply make a synchronous call instead of asynchronous, but I don't have that level of control: I'm using somebody else's API which in turn calls eBay's Javascript API.

Below are my two functions, actually methods on the same closure/object, with categoryStack and categoryMap in scope for each. In essence I'm trying to recursively build up a map, though I want to use a stack for management, rather than true recursion.

I've tried a few variations on setInterval/setTimeout but I always get one of two results: one iteration of the loop, or an endless loop. Note that m_eBay.getChildCategories specifies the second of the two functions below as a callback, and I have confirmed that I am getting there successfully.

function getChildCategories() {
    categoryStack.push(-1);

    while (categoryStack.length > 0) {
        catId = categoryStack.pop();

        m_eBay.getChildCategories({
         'success':getChildCategoriesSuccess,
         'failure':getChildCategoriesFailure},
         {'siteid':0, 'CategoryID':catId, 'IncludeSelector':'ChildCategories'}
        );

        /*
          use response from getChildCategoriesSuccess to reset categoryStack
        */
    }
}

    function getChildCategoriesSuccess(data){
        if (data.categoryCount > 0) {
            var categoryObjs = data.categoryArray.category;
            for (var i=0, n=categoryObjs.length; i<n; i++) {
                var catObj = categoryObjs[i];
                if (catObj.categoryID != -1) { //skip root
                    categoryStack.push(catObj.categoryID);
                    categoryMap[catObj.categoryName] = catObj.categoryID;
                }
            }
        }
    }

Answer 1

Using asynchronous ajax you need to do something like:

function getChildCategories(onload) {
    var categoryStack = [-1];
    function doNextOrFinish() {
        if (categoryStack.length) {
           m_eBay.getChildCategories({
               'success': function(data) {
                   if (data.categoryCount > 0) {
                       var categoryObjs = data.categoryArray.category;
                       for (var i=0, n=categoryObjs.length; i<n; i++) {
                           var catObj = categoryObjs[i];
                           if (catObj.categoryID != -1) { //skip root
                               categoryStack.push(catObj.categoryID);
                               categoryMap[catObj.categoryName] = catObj.categoryID;
                           }
                       }
                   }
                   doNextOrFinish();
               },
               'failure':getChildCategoriesFailure},
               {'siteid':0, 'CategoryID':categoryStack.shift(), 'IncludeSelector':'ChildCategories'}
           );
        } else {
            if (onload) onload();
        }
    }
    doNextOrFinish();
}

Still uses recursion though.

Another solution to this problem is to use Arrows.