Question

我有一个对象charts，

 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
            }
        } 
    }

功能callback

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。所以，我想在上一个图表的回调中逐个调用图表。（当绘制一个完成时，绘制第二个，依此类推......）

我可以通过创建一个包含每个图表名称的数组来实现这一目标。在callback函数上，我将递增索引并调用下一个图表。

这是问题，

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

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)循环的情况下直接从一个对象迭代一个键列表，所以你需要创建一个可以通过递增索引来迭代的中间数组。

Answer 2

您正在寻找JS Deferred Library - {{3p>

在循环内调用异步函数

2 个答案: