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の起こります。私はの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); 

    }); 

});