事件侦听器的有趣内存问题

Interesting memory issue with event listeners

本文关键字：内存 问题 侦听器 事件      更新时间：2023-09-26

让我解释一下我所说的"记忆"是什么意思。我有一个谷歌地图。我正在为地图制作一个标记数组，并为每个标记添加侦听器。

for( var venue in response.markers ){
    var loc = new google.maps.LatLng(response.markers[venue].GPSX, response.markers[venue].GPSY);
    var marker = new google.maps.Marker({
        position: loc,
        title: response.markers[venue].VenueName,
        map: map
    });
    google.maps.event.addListener(marker, 'click', function() {
        alert(venue);
    });
    markers.push(marker);
}

当标记被点击时，场地具有响应标记中有多少东西的值。如何让侦听器发出警报或使用场地创建时的原始值？例如，第一个标记应发出警报 0，第二个标记应发出警报 1，依此类推。

在 JavaScript 中完成 for 循环后，变量仍然存在。但它们被设置为他们最终得到的任何值。因此，当最终调用单击函数时，场地是response.markers中的最后一项。

我会在函数上使用绑定方法来创建一个新函数，并在正确的时间绑定适当的参数。这样：

function alertVenue(venue) {
    alert(venue);
}
for( var venue in response.markers ){
    // other stuff goes here
    google.maps.event.addListener(marker, 'click', alertVenue.bind(this, venue));
    markers.push(marker);
}

使用 bind 的好处是你的堆栈跟踪看起来会更好（因为 alertVenue 是一个命名函数），并且当你阅读它时

也很清楚发生了什么。

你可以做这样的事情：

google.maps.event.addListener(marker, 'click', (function(venue) {
        return function(){alert(venue)};
    }(venue)));

为避免与外场关闭。

相关文章：