Javascript:设置多个图表更新的间隔

Question

我正在尝试在页面上显示三个 Google 图表仪表来表示来自三个温度传感器的数据。我有一个 JS 函数 GetCurrentTemperature，它返回数组中的三个温度值。我希望仪表定期更新。我已经使用单个仪表正常工作，但是当我尝试对三个图表使用 setInterval 时，它们没有更新。下面列出了我正在使用的代码。

function drawTemperatureGauges() {

var currentTemp = GetCurrentTemperature();
var gaugeCount = currentTemp.length;

var options = {
    width: 200, 
    height: 200,
    redFrom: 65,         
    redTo: 80,
    yellowFrom: 50, 
    yellowTo: 65,
    minorTicks: 5,
    max: 80
};

for(var i=0; i<gaugeCount; i++) {

    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Temp', currentTemp[i] ]
    ]);

    var divName = 'gauge'.concat(i+1).concat('_div');
    var chart = new google.visualization.Gauge(document.getElementById(divName));

    chart.draw(data, options);

    setInterval(function() {
        var cTemp = GetCurrentTemperature();
        data.setValue(0, 1, cTemp[i]);
        chart.draw(data, options);
    }, 2000);
}

}

我认为这是因为我在匿名 setInterval 函数中使用了 i 。我查看了与闭包相关的帖子以及指定使用 let 而不是 var 的帖子，但我仍然无法弄清楚我需要什么语法。

非常感谢任何指点

Bz

Answer 1

您是否尝试过锁定这样的闭包？

for(var i=0; i<gaugeCount; i++) {
  drawGauge(i);
}

function drawGauge(i) {
    var data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        ['Temp', currentTemp[i] ]
    ]);

    var divName = 'gauge'.concat(i+1).concat('_div');
    var chart = new google.visualization.Gauge(document.getElementById(divName));

    chart.draw(data, options);

    setInterval(function() {
        var cTemp = GetCurrentTemperature();
        data.setValue(0, 1, cTemp[i]);
        chart.draw(data, options);
    }, 2000);
}