javascript - 在循环内调用异步函数

Question

我有一个对象图表，

 var charts = {
        chart1 : function (){
            return {
                key1 : value1,
                key2: value2,
                key3, value3
            }
        },
        chart2 : function(){
            return {
                key1 : value1,
                key2: value2,
                key3, value3
            }
        },
        chart3 : function(){
            return {
                key1 : value1,
                key2: value2,
                key3, value3
            }
        } 
    }

函数回调

function callback(instance){
    .....
    .....
}

我可以像这样绘制图表chart1，

var chart = new Highcharts.Chart(charts.chart1(),callback);
// callback is a function which gets called when drawing of chart is completed.

以及所有像这样的图表，

 for(chart in charts){
        if(charts.hasOwnProperty(chart)){
            new Highcharts.Chart(charts.chart(),callback);
        }
    }

但是，同时绘制大量图表会使 Firefox 挂起。 因此，我想在上一个图表的回调中逐个调用图表。 (绘制完一张后，再绘制第二张，依此类推...)

我可以通过创建一个包含每个图表名称的数组来实现这一点。在回调函数中，我将增加索引并调用下一个图表。

问题来了

如何在不手动创建图表名称列表的情况下绘制所有图表？

Answer 1

您可以创建对象中所有键的可迭代数组，然后在构建每个图表时逐一循环遍历它们:

function makeAllCharts() {
    // make list of charts
    var chartList = [], pos = 0;
    for (chart in charts) {
        chartList.push(chart);
    }

    function nextChart() {
        if (pos < chartList.length) {
            var key = chartList[pos++];
            new Highcharts.Chart(charts[key](), function() {
                callback();
                nextChart();
            });
        }
    } 
    nextChart();
}

因为如果没有 for (x in y) 循环，您无法直接从对象一次迭代一个键列表，因此您确实需要创建可迭代的中间数组通过增加索引。