複数の非同期ループの後、Googleのチャートを記入

Question

私は、データベースからデータを取得、非同期PHPの呼び出しを持っているJavaScriptのループを持っています。データの後

function getTaskDueNum(var, callback){ 

var request = $.ajax({ 
    url: phpRoot + "get_due.php", 
    type: "post", 
    async: true, 
    dataType: 'text', 
    data: { 
     'var': var 
    }, 
    success: function (data) { // <-- note the parameter here, not in your code 
     callback(data); 
    }, 
    error: function (xhr, status) { 
    } 

}); 

} 

：PHPはこのようになります

var dueCount = {}; 
for(var i=1; i<=5; i++) { 

    //ASYNC TASK #1 
    getTaskDueNum(i, function(result){ 
     dueCount[i] = result; 

    }); 

    //ASYNC TASK #2 
    getTaskCompleteNum(i, function(result){ 
     completeCount[i] = result; 

    }); 

} 

google.charts.setOnLoadCallback(drawChart); 

ただし、グラフはデータの前に描画されていますdueCountを満たす非同期呼び出しから返されます。

どのように非同期タスクが完了するのを待つようにdrawChartに指示できますか？

Answer 1

あなたが表示するgetTaskDueNum（）関数は実際にJavaScriptで、非同期ビットにjQueryを使用しています。 AJAX機能のすべては、アレイ内で）あなたは$ .when（にそれらを渡すことができ、繰延オブジェクトを返す：

var deferreds = []; 
for (var i=1; i<=5; i++) { 
    deferreds.push(getTaskDueNum(i, function(result){ 
     dueCount[i] = result; 
    })); 
    deferreds.push(getTaskCompleteNum(i, function(result){ 
     completeCount[i] = result; 
    })); 
} 

$.when.apply(null, deferreds).done(function() { 
    // draw chart 
}); 

あなたはgetTask関数は '（これが機能するためにかかわらず、あなたが呼び出す変数をDeferredの作り方を返す必要があります要求'）。

しかし、サーバーに10種類の非同期呼び出しを行わなければならない理由を見て、必要なデータをサーバーに結合させる必要があります。