的Ajax调用异步函数结束前，内循环功能

Question

这是我与挣扎代码：

$(document).ready(function() { 
    var dataSets = []; 
    getSensorIDs().done(function (result) { 
     var sensorIDs = jQuery.parseJSON(result); 
     $.each(sensorIDs, function (index, value) { //loop through each id 
      getDataBySensorID(value.id).done(function (res) { 
       var temperatureData = jQuery.parseJSON(res); 
       var dataPoints = []; 
       $.each(temperatureData, function (index, value) { 
        dataPoints.push({ 
         x: index 
         , y: value.value 
        }); 
       }) 
       dataSets.push(buildDataset(dataPoints, 1)); 
       alert("Pushed something."); 
      }); 
     }); 
     alert("Drawed something."); 
     drawChart(dataSets); 
    }) 
}); 

的问题是：Drawed something发生提前Pushed something即使该程序流程不喜欢看它会。我以为我修复了problem的ajax（这是异步）与.done()，但它似乎并不是这样。什么是适当的解决这个问题？

Answer 1

它正在按照它应该的原样工作，因为“推送的东西”代码在NESTED AJAX请求的done回调。这将是未来的某个时候。所以，JavaScript引擎继续处理其余的代码，其中包括接下来顶层AJAX请求中的“Drawed something”，以便发生。

在未来的某个时候，AJAX呼叫将会完成，并且done回调将会触发，然后您将得到“推送内容”。

// 1. When the document is ready... 
$(document).ready(function() { 
    var dataSets = []; 

    // 2. Make the AJAX call, BUT DONE RUN .done YET! 
    getSensorIDs().done(function (result) { 

     var sensorIDs = jQuery.parseJSON(result); 

     // loop through each id 
     $.each(sensorIDs, function (index, value) { 

      // 3. As part of the first AJAX call, make a SECOND one 
      getDataBySensorID(value.id).done(function (res) { 
       var temperatureData = jQuery.parseJSON(res); 
       var dataPoints = []; 
       $.each(temperatureData, function (index, value) { 
        dataPoints.push({ 
         x: index 
         , y: value.value 
        }); 
       }); 

       // 5. The nested call finishes last 
       dataSets.push(buildDataset(dataPoints, 1)); 
       alert("Pushed something."); 

      }); 

     }); 

     // 4. This runs first because the first AJAX call is finishing 
     // before the nested one (above) 
     alert("Drawed something."); 
     drawChart(dataSets); 

    }); 

});