Google Charts循环绑定多事件监听器被覆盖问题求助

你遇到的问题是典型的闭包作用域陷阱：循环中用var声明的chart和data变量是函数级作用域，所有的事件监听器回调函数都会共享这两个变量的引用。当循环结束时，它们都会指向最后一次循环的图表和数据对象，所以点击任意图表触发的都是最后一个图表的逻辑。

下面给你几个可行的解决方案：

方案1：使用立即执行函数表达式（IIFE）创建独立作用域 #

通过IIFE将每次循环的chart和data封装到独立的函数作用域中，确保每个监听器绑定的是当前循环的对象引用：

// 监听器绑定代码修改为：
for (i = 0; i < {{ length }}; i++){
  // 用IIFE捕获当前循环的chart和data
  (function(currentChart, currentData) {
    console.log("Container id: " + currentChart.container.id);
    google.visualization.events.addListener(currentChart, 'select', function () {
      selectHandler(currentChart, currentData);
    });
  })(arrayChart['chart' + i], arrayData['data' + i]);
}

方案2：使用let声明变量（ES6+支持） #

let具有块级作用域，每次循环都会创建新的chart和data变量，每个监听器回调会绑定当前循环块的变量：

// 监听器绑定代码修改为：
for (let i = 0; i < {{ length }}; i++){
  let chart = arrayChart['chart' + i];
  let data = arrayData['data' + i];
  console.log("Container id: " + chart.container.id);
  google.visualization.events.addListener(chart, 'select', function () {
    selectHandler(chart, data);
  });
}

方案3：将绑定逻辑抽离为独立函数 #

把监听器绑定的逻辑封装成一个函数，每次循环调用该函数并传入当前的chart和data，利用函数参数的作用域保存当前引用：

// 新增绑定函数
function bindChartSelectListener(chart, data) {
  console.log("Container id: " + chart.container.id);
  google.visualization.events.addListener(chart, 'select', function () {
    selectHandler(chart, data);
  });
}

// 监听器绑定代码修改为：
for (i = 0; i < {{ length }}; i++){
  bindChartSelectListener(arrayChart['chart' + i], arrayData['data' + i]);
}

这三种方案都能解决你的问题，你可以根据项目的ES版本支持情况选择最合适的方式。如果项目兼容ES6+，方案2的代码最简洁；如果需要兼容旧环境，方案1或3更稳妥。

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