使用setInterval更新多个Google Chart仪表盘失效问题排查

嗨，这个问题我之前也踩过坑！核心原因是JavaScript闭包在循环中的特性——当你在for循环里用setInterval时，匿名函数引用的i是循环结束后的最终值（也就是2，因为数组索引从0开始），所以三个仪表盘最后都会尝试更新第三个传感器的数据，导致另外两个无法正常刷新。下面给你两种简单有效的解决办法：

方法1：用立即执行函数（IIFE）锁定循环变量 #

通过立即执行函数创建独立作用域，把当前循环的i值固定下来，避免后续闭包引用同一个变量：

// 假设你已经初始化好了三个仪表盘，存在gauges数组中
for (var i = 0; i < 3; i++) {
  // 用IIFE捕获当前迭代的i值
  (function(currentIndex) {
    setInterval(function() {
      // 获取最新温度数组
      var tempData = GetCurrentTemperature();
      // 更新对应索引的仪表盘
      updateGauge(currentIndex, tempData[currentIndex]);
    }, 1000); // 每秒更新一次
  })(i);
}

方法2：用ES6的let声明循环变量（更简洁） #

let具有块级作用域，每次循环迭代都会创建一个新的i变量，闭包会捕获当前迭代的变量值：

for (let i = 0; i < 3; i++) {
  setInterval(function() {
    var tempData = GetCurrentTemperature();
    updateGauge(i, tempData[i]);
  }, 1000);
}

补充：仪表盘初始化与更新函数示例 #

为了让你更清晰，这里给出完整的初始化和更新逻辑：

// 存储三个仪表盘实例的数组
let gauges = [];

// 初始化所有仪表盘
function initAllGauges() {
  google.charts.load('current', {'packages':['gauge']});
  google.charts.setOnLoadCallback(function() {
    for (let i = 0; i < 3; i++) {
      // 创建仪表盘数据
      const data = google.visualization.arrayToDataTable([
        ['Label', 'Value'],
        [`传感器${i+1}温度`, 0]
      ]);

      // 仪表盘配置
      const options = {
        width: 250,
        height: 250,
        redFrom: 35,
        redTo: 50,
        yellowFrom: 25,
        yellowTo: 35,
        greenFrom: 10,
        greenTo: 25,
        minorTicks: 5
      };

      // 创建仪表盘实例并绘制
      const gauge = new google.visualization.Gauge(document.getElementById(`gauge-container-${i}`));
      gauge.draw(data, options);
      gauges.push(gauge);
    }

    // 初始化完成后启动定时更新
    startTemperatureUpdates();
  });
}

// 更新单个仪表盘的函数
function updateGauge(index, temperature) {
  const targetGauge = gauges[index];
  const data = targetGauge.getDataTable();
  // 更新温度值
  data.setValue(0, 1, temperature);
  // 重新绘制仪表盘
  targetGauge.draw(data, null);
}

// 启动所有仪表盘的定时更新
function startTemperatureUpdates() {
  // 这里用上面两种方法中的任意一种即可
  for (let i = 0; i < 3; i++) {
    setInterval(function() {
      const temps = GetCurrentTemperature();
      updateGauge(i, temps[i]);
    }, 1000);
  }
}

// 页面加载后初始化
window.onload = initAllGauges;

注意：确保你的HTML中有三个对应的容器元素，比如：

<div id="gauge-container-0"></div>
<div id="gauge-container-1"></div>
<div id="gauge-container-2"></div>

这样修改后，三个仪表盘就能各自独立定时更新对应的传感器温度数据啦！

内容的提问来源于stack exchange，提问作者Bob