Динамическое добавление содержимого

Question

Я использую 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> 

Это производит около 10 графиков друг под другом, но проблема в том, что показывает пустой экран в течение 3-5 секунд, а затем отображает все графики сразу. Если я ограничу его, чтобы развернуть только один график, он проявляется намного быстрее. Было бы неплохо показать эти графики постепенно по очереди, когда каждый график будет готов.

UPD: Вот jsfiddle Я поместил тестовые данные и проехал по одному графику 20 раз.

Answer 1

Некоторые вещи вдоль линий это должно помочь .....

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

Вот demo