Javascript 动态追加内容

我使用javascript一个接一个地显示一系列图表（图形）。Javascript脚本从PHP脚本请求数据，然后绘制图表并显示。获取一张图表的数据并显示它并不需要太多时间，但对于许多图表来说，时间会累积起来，这很无聊。我想显示第一个图表，当它准备好了，然后第二个图表等，所以用户可以看到这些动态附加在页面上，使页面越来越长

基本上这就是我所拥有的：

<script>
var i=0;
$.getJSON('stats.php', function (data) {
    for (chartData in data) {
        i++;
        var chart = new AmStockChart();
        dataSet.dataProvider = chartData;
        // etc. etc.

        $('#stats').append('div id="chartdiv' + i + '"></div>');
        chart.write("chartdiv" + i);
    }
});
</script>

<div id="stats"></div>

var i=0；
$.getJSON（'stats.php'，函数（数据）{
用于（数据中的图表数据）{
i++；
var图表=新的AmStockChart（）；
dataSet.dataProvider=图表数据；
//等等等等。
$（'#stats'）.append（'divid=“chartdiv'+i+'”>）；
chart.write（“chartdiv”+i）；
}
});

这会产生大约10个图形，一个接一个，但问题是显示空屏幕大约3-5秒，然后一次显示所有图形。如果我将其限制为只显示一个图形，则显示速度要快得多。当每个图形准备就绪时，逐步逐个显示这些图形会很好

---

UPD:这是我输入的测试数据，并在一个图中循环了20次。

按照这条思路做一些事情应该会有所帮助

var i = 0;
$.getJSON('stats.php', function (data) {
    for (chartData in data) {
        i++;
        setTimeout(function(index,d1){
            return function() {
                  var chart = new AmStockChart();
                  dataSet.dataProvider = data[d1];
                  // etc. etc.

                  $('#stats').append('div id="chartdiv' + index + '"></div>');
                  chart.write("chartdiv" + index);
            }
        }(i,chartData), 3000*i);
    }
});

var i=0；
$.getJSON（'stats.php'，函数（数据）{
用于（数据中的图表数据）{
i++；
设置超时（函数（索引，d1）{
返回函数（）{
var图表=新的AmStockChart（）；
dataSet.dataProvider=数据[d1]；
//等等等等。
$（'#stats'）.append（'divid=“chartdiv'+index+”>）；
chart.write（“chartdiv”+索引）；
}
}（i，图表数据），3000*i）；
}
});

---

这里是

实际上3-5秒是用来获取数据的。一旦获取了数据，它就会显示出来。Anywaz可以为你的代码创建一个JSFIDLE OK，只是在postok中添加了JSFIDLE。只是添加了一个带有演示的答案…嗯。。。我觉得这是非常接近，但这一个附加了空div所有相同的id谢谢你的帮助。是的，可能应该是这样的。然而，我开始把它放在我的代码中，它在数组中有几个图形，并且发现您的演示始终只显示最后一个图形。我修改了jsfiddle示例，并向数组中添加了两个图。你们可以在这里看到，只有最后一张图被重复。这是天才！因此，数据获取时间就是显示第一个图形所需的时间，其余的图形显示每个图形都有3秒的延迟，对吗？