javascript - 在 Javascript 循环中附加监听器

Question

这个问题已经有答案了:

JavaScript closure inside loops – simple practical example (45 个回答)

已关闭 6 年前。

我有一个对象(卡片)数组，其中包含 id , latitude和longitude 。然后，我构建了一组标记以附加到 GoogleMap map :

for(var c = 0; c < cards.length; c++)
{
    var id = cards[c]["id"];
    var lat = cards[c]["lat"];
    var lon = cards[c]["lon"];

    var marker = new google.maps.Marker({ position: new google.maps.LatLng(lat, lon)});
    marker.setMap(map);
    marker.addListener('click', function(){
        myListenerCallback(id);
    });
}

在每个标记上，我想在单击事件上附加一个回调。通过使用标记的 .addListener 可以很容易地完成此操作。方法。问题是，我想触发一个回调，其中包含卡的 id(作为输入参数):myListenerCallback(id) 。看起来所有回调都是使用数组的最后一个 id 触发的。如何触发传递相应 id 的回调？

Answer 1

这是因为当事件处理程序被触发时，循环已完成执行，并且 id 会使用数组的最后一个值进行更新。

您可以围绕事件处理函数创建一个闭包并传递id

for (var c = 0; c < cards.length; c++) {
  //rest of the code
  (function(id) {
    marker.addListener('click', function() {
      myListenerCallback(id);
    });
  }(id))
}