17370845950

在 highcharts 中为导出菜单动态添加自定义按钮时，若使用 `var` 声明循环变量，`onclick` 回调会因闭包共享同一变量引用，导致所有按钮始终传入最后一次迭代的值；改用 `let`（块级作用域）可完美解决。

Highcharts 的导出按钮（如 contextButton.menuItems）支持通过数组注入自定义操作项。但在 JavaScript 中，使用 var 在 for 循环中声明变量时，其作用域是函数级而非块级——这意味着所有 onclick 回调函数共享同一个 colid 和 caption 变量绑定，最终全部指向循环结束时的最后值。

✅ 正确做法：使用 let（或 const）替代 var，利用 ES6 块级作用域特性，为每次迭代创建独立的绑定：

for (let i = 0; i < arr_papers.length; i++) {
    const caption = arr_papers[i].caption;
    const colid = arr_papers[i].colid;

    buttons.push({
        text: caption,
        id: colid,
        onclick: function () {
            loadPerformanceBarChart(colid, caption); // ✅ 每次调用都捕获对应迭代的值
        }
    });
}

? 补充说明：

• let 在每次循环迭代中创建新的绑定，因此每个 onclick 函数闭包都持有各自独立的 caption 和 colid；
• 若需兼容较老环境（如 IE），可改用立即执行函数表达式（IIFE）包裹：

  for (var i = 0; i < arr_papers.length; i++) {
      (function(caption, colid) {
          buttons.push({
              text: caption,
              id: colid,
              onclick: function() {
                  loadPerformanceBarChart(colid, caption);
              }
          });
      })(arr_papers[i].caption, arr_papers[i].colid);
  }

• 高charts 4 支持该写法，无需额外 polyfill；建议优先采用 let/const，代码更简洁、可读性更强、不易出错。

⚠️ 注意事项：

• 切勿在 onclick 中直接引用 arr_papers[i]（因 i 已超出作用域或为最终值）；
• 确保 loadPerformanceBarChart 函数已正确定义且可访问；
• 若按钮需异步加载数据，建议在 onclick 内增加加载状态反馈（如禁用按钮、显示 loading 提示），提升用户体验。

通过这一改动，每个自定义按钮将精准传递其对应的 colid 和 caption，彻底解决参数“全部取最后一项”的经典闭包陷阱。