Question

我有一个包含多个图表的页面，我为每个图表的导出上下文菜单添加了特定选项。我需要在点击任何项目时调用somefunction（）。绝对可行，但不正确！

这是我正在使用的代码：

HelloWorld = function () {
    var items = [];
    for (var index = 0; index<5; index++) {
        items.push({text: "items "+index, onclick: function() {
            alert(index);
        }});
    }
    return items;
};

buttons: {
  contextButton: {
    menuItems: HelloWorld()
  }
}

这是一个演示我的问题的小提琴：Fiddle

点击任何项目时，点击功能提醒（5）！ Thanx很多！

Answer 1

这是一个closure问题。问题出在这里：

for (var index = 0; index<5; index++) {
    items.push({text: "items "+index, onclick: function() {
        alert(index);
    }});
}

在每次迭代中，您将onclick的值设置为警告index的函数。但是，每个函数中的index变量都绑定到函数外部声明的一个index变量。它们在函数运行时实际使用的index的值是index的最终值，即5。

为了解决这个问题，您可以使用IIFE (Immediately-Invoked Function Expression)包装器将index的每个值作为新变量i传递给匿名函数，其值不会更改为{ {1}}更改。

index

换句话说，包装函数立即执行并返回一个新函数，它的行为与原始函数类似，只是它没有绑定到for (var index = 0; index<5; index++) { items.push({text: "items "+index, onclick: (function(i) { return function(){ alert(i); } })(index)}); }迭代器。

Updated fiddle

Highcharts：上下文菜单按钮，onclick功能

1 个答案: