在循环jquery中等待ajax返回

Question

我一直在努力使用$.Deferred对象来使其工作。这是存根设置。

g_plans = []; 

$(function(){ 
    // I have to use a custom ajax function, but it returns a promise obj 
    var pageLoadPromise.ajax{(
     url: //call to webmethod 
    }); 

    pageLoadPromise.done(matrix.buildGrid); 

    ... 
}); 

(function(matrix,$,undefined){ 

    var matrix.buildGrid = function(components){ 
     var gridData = data.d.components; 
     buildHeader(gridData); 
     buildRows(gridData); 
    }; 

    function buildHeader(components){ 
      $.each(components,function(key,component){ 
       //does some stuff 
       if(this === that){ 
        //do some other stuff 
       } 
       else{ 
        getPlans(copmonent.COMPONENT_ID); 
        //does other stuff 
       } 
      }); 
     } 
    } 

    function buildRows(components){ 
     //does stuff, but uses data from getPlans 
    } 

    function getPlans(component){ 
     var planPromise = ajax({ 
      url: //call to webmethod 
      data:{ componentId:component} 
     planPromise.done(function(data){ 
      g_plans.push({componentId:componentId,plans:data.d.plans}); 
     }); 
    } 
})(window.matrix = window.matrix || {}, jQuery); 

问题是buildRows开始了getPlans有时间来完成它的Ajax调用，这是造成我的问题了。我尝试了一些没有成功的事情。任何帮助，将不胜感激。

Answer 1

这是我看到的最简单的解决方案：

1）有getPlans()返回planPromise承诺，然后可以处理回到buildHeader()功能。

function getPlans(component) { 
    var planPromise = ajax({ 
     url: //call to webmethod 
     data:{ componentId:component} 
    }); 
    planPromise.done(function(data) { 
     g_plans.push({componentId: data.componentId, plans: data.d.plans}); 
    }); 
    return planPromise; // return the promise! 
} 

2）使用承诺调用从buildHeader()功能buildRows()而不是matrix.buildgrid从getPlans()返回。

function buildHeader(components) { 
    var lastPromise; 
    $.each(components, function (key, component) { 
     lastPromise = getPlans(component.COMPONENT_ID); 
    }); 
    lastPromise.done(function() { 
     buildRows(components); 
    }); 
} 

这里是一个JSFiddle说明的基本思想。

第二步是不必要的，我发现它更容易。另一种选择是从buildHeader()返回lastPromise，并在matrix.buildgrid处理它。

var matrix.buildgrid = function(components) { 
    var gridData = components; 
    var lastPromise = buildHeader(gridData); 
    lastPromise.done(function() { 
     buildRows(components); 
    }); 
}; 

function buildHeader(components) { 
    var lastPromise; 
    $.each(components, function (key, component) { 
     lastPromise = getPlans(component.COMPONENT_ID); 
    }); 
    return lastPromise; 
} 

编辑：

要处理的lastPromise从未得到设置为一个承诺的情况下，你必须做这样的事情：

if (lastPromise && typeof lastPromise === 'object') { 
    lastPromise.done(function() { 
     buildRows(components); 
    }); 
} else { 
    buildRows(components); // or whatever needs to happen here. 
} 

这里有一个JSFiddle包括在该位buildHeader函数。