脚本不与循环同时运行

I currently have a for loop and I am running a script inside it.

I logged whenever the loop ran and whenever the function was executed.

This is a sample of my code:

This script is in a loop that runs 3 times

<script>
console.log ("LOOP");
var impressions = [<?= implode(",", $prod_impression_dots) ?>];                             
var testdata = [
{
    "key" : "Impressions" ,
    "type": "line",
    "values" : impressions,
    "yAxis": 1
}    
].map(function(series) {
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
        return series;
    });

nv.addGraph(function() {
     console.log ("Add graph is called here");
     console.log (testdata);
     var chart = nv.models.multiChart()
                .margin({top: 30, right: 60, bottom: 50, left: 70})
                .x(function(d,i) { return i })
                .color(d3.scale.category10().range());

chart.xAxis
    .tickFormat(function(d) {
        var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
        if (typeof (dx) == undefined || d > 1000) {
            dx = new Date (d);
        }
        else {
            dx = new Date (dx);
        }
        return dx ? d3.time.format('%x')(dx) : '';
        });

chart.yAxis1
    .tickFormat(d3.format(',.1f'));

chart.yAxis2
    .tickFormat(d3.format(',.4f'));

d3.select('#chart<?= $counter ?> svg')
.datum(testdata)
.transition().duration(500).call(chart);  
nv.utils.windowResize(chart.update);
return chart;
});
</script>

Below the script is the div tag

<div id='chart<?= $counter ?>' style="width:1150px;height:300px;font-size:11px;margin-top:5px">
            <svg> </svg>
            </div>

After running this. The output in the console log is as follows;

LOOP 
LOOP 
LOOP 
Add graph is called here 
[Object, Object, Object, Object]
Add graph is called here
[Object, Object, Object, Object]
Add graph is called here
[Object, Object, Object, Object]
total 199 nv.d3.js:40

I am just wondering why the function isn't executed right after one iteration of the loop. This causes all the graphs to have the same data.

Thanks.

Definitely your addGraph complete function gets called asynchronously. You can work around this like this.

<script>
console.log ("LOOP");
var impressions = [<?= implode(",", $prod_impression_dots) ?>];                             
var testdata = [
{
    "key" : "Impressions" ,
    "type": "line",
    "values" : impressions,
    "yAxis": 1
}    
].map(function(series) {
    series.values = series.values.map(function(d) { return {x: d[0], y: d[1] } });
        return series;
    });

nv.addGraph((function (testdata) {
     return function() {
     console.log ("Add graph is called here");
     console.log (testdata);
     var chart = nv.models.multiChart()
                .margin({top: 30, right: 60, bottom: 50, left: 70})
                .x(function(d,i) { return i })
                .color(d3.scale.category10().range());

chart.xAxis
    .tickFormat(function(d) {
        var dx = testdata[0].values[d] && testdata[0].values[d].x || 0;
        if (typeof (dx) == undefined || d > 1000) {
            dx = new Date (d);
        }
        else {
            dx = new Date (dx);
        }
        return dx ? d3.time.format('%x')(dx) : '';
        });

chart.yAxis1
    .tickFormat(d3.format(',.1f'));

chart.yAxis2
    .tickFormat(d3.format(',.4f'));

d3.select('#chart<?= $counter ?> svg')
.datum(testdata)
.transition().duration(500).call(chart);  
nv.utils.windowResize(chart.update);
return chart;
}
})(testdata));
</script>