我该如何重构addEventListener

How should I restructure my addEventListener?

本文关键字：重构 addEventListener 何重构      更新时间：2023-09-26

我正在使用谷歌地图的API。我有一个数组的标记和信息窗口的数组，我试图得到各自的信息窗口显示时，标记被点击。我很难理解我应该如何添加我的事件监听器，以便它尊重JavaScript闭包。

(不正确)代码，所有这些代码都包含在页面加载时调用的initialize()中:

var markers = []
var infoWindows = []
[define all markers and info windows here, long so cut]
for (var i = 0; i < markers.length; i++)
{
    google.maps.event.addListener(markers[i], 'click', function() {
        infoWindows[i].open(mymap, markers[i]);
    });
}

我已经确保我所有的对象在到达这里之前都被正确初始化了。

我对问题的理解是，当点击事件发生时，infoWindows[i]不再可访问。我该怎么做才能使eventListener像我认为的那样工作，在数组中第I个位置的infoWindow对应于第I个位置的标记?

你是对的，infoWindows[i]不再是可访问的，因为i的值已经更新。

解决这个问题的一种方法是使用.forEach: 
markers.forEach(function(value, i){
    google.maps.event.addListener(markers[i], 'click', function() {
        infoWindows[i].open(mymap, markers[i]);
    });
})
在本例中，每个事件侦听器的i变量位于不同的函数中。当前代码每次都使用相同的i变量，并且每个事件侦听器中的i变量都是相同的。在分配了所有事件侦听器之后，i保持其最终值，markers[i]指向列表中的最后一个标记。

查看这个问题的其他解决方案

相关文章：