javascript - 根据单击的链接将参数从在循环中运行的函数传递给函数

Question

function loadGroups() {
  new Ajax.Request("https://www.xyz.com/groups.json", {
    method: 'get',
    onSuccess : function(transport) {

      var response = JSON.parse(transport.responseText);

      for (var i=0; i<response.length; i++) {
          var hostname = response[i];
          var tr = new Element("tr", { id: hostname });
          var link = new Element("a");
          link.setAttribute("href", id=hostname);
          link.innerHTML = hostname;

          # PROBLEM
          # This onClick always sends response[-1] instead of response[i]
          link.onclick = function() { loadHosts(hostname); return false; };


          var td1 = new Element("td", { className: hostname });
          link.update(hostname);
          td1.appendChild(link);
          tr.appendChild(td1);
          table.appendChild(tr);

      }
    }
  });
}

response = ['john', 'carl', 'jia', 'alex']

在这种情况下，我的目标是在页面上显示 4 个链接，并且每当单击链接时，应将相应的值传递给函数 - loadHosts。但问题始终是最后一个值作为参数发送到 loadHosts 函数。链接的显示很好，只是点击这些链接总是传递数组的最后一个元素。我也试过 loadHosts(link.href) , loadHosts(link.id)

Answer 1

您的问题在于闭包的工作方式，您在 for 循环内有一个点击处理程序，它使用在 for 循环内定义的变量。当点击处理程序运行时，您的变量的值与您附加处理程序时的值不同，因为循环已经完成并且它现在具有不同的值。

尝试这样的事情:

for (var i=0; i<response.length; i++) {
    var hostname = response[i];
    //...
    link.onclick = (function(hn) {
       return function() { loadHosts(hn); return false; };
    })(hostname);
}

这使用立即调用的函数表达式 (IIFE) 在循环期间将 hostname 的值复制到新变量 hn。现在，当执行处理程序时，它将绑定(bind)到正确的值。

Here's解释问题(和解决方案)的博客文章。

另请注意，for 循环不定义变量范围。 for 循环中定义的变量属于封闭函数范围。所以 hostname 存在于你的 for 循环之外，这就是为什么它在你的点击处理程序中保存最后一个循环的值而不是你附加处理程序时的值。它还解释了为什么 link.href 也不起作用。变量 link 也附加到封闭函数范围而不是限于循环。