javascript - 将迭代变量传递给 for 循环内的单击事件

Question

我有以下代码:

var i = 0;
for (var anchor in window.globals.html.anchors) {
     var value = window.globals.html.anchors[anchor];
     value.addEventListener('click', function(i) {
          var currData = window.globals.data[i],
              data_clientId = 0;
          if (currData.client_product_id !== undefined) {
              data_clientId = currData.getAttribute('data_clientId');
          } else if (currData.product_id !== undefined) {
              data_clientId = currData.product_id;
          }
          Statistics.send(data_clientId);
          window.open(window.globals.data[i].url, '_blank');
     }(i));
     i++;
}

这意味着我想通过点击事件监听器内的交互器访问全局数组。如果我不将 i 传递给点击事件，我会在每次迭代中获得可能的最大数量，因为 i 将是一个全局变量。

但在这里，似乎单击事件的所有迭代都是在单击任何内容之前调用的，onload。

为什么会这样，出了什么问题？

Answer 1

看起来您正在调用处理程序，同时尝试将其添加到 addEventListener。您需要将其包装在一个函数中，从而创建一个封装 i 变量的闭包。

var i = 0;
for (var anchor in window.globals.html.anchors) {
   var value = window.globals.html.anchors[anchor];
   value.addEventListener('click', (function(i) {
     return function() {
        var currData = window.globals.data[i],
            data_clientId = 0;
        if (currData.client_product_id !== undefined) {
            data_clientId = currData.getAttribute('data_clientId');
        } else if (currData.product_id !== undefined) {
            data_clientId = currData.product_id;
        }
        Statistics.send(data_clientId);
        window.open(window.globals.data[i].url, '_blank');
     }
   }(i)));
   i++;
}

现在请注意，您传递给 addEventListener 的函数会立即被调用，并返回一个函数本身，其中变量 i 的作用域为该函数本身。