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

Question

让我解释一下 "memory" 的意思。我有一张 Google 地图。我正在为地图制作一组标记，并为每个标记添加侦听器。

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);
}

点击标记时，地点的价值与 response.markers 中的许多东西相同。我如何让听众提醒或使用其创建时的原始价值？例如，第一个标记应提醒 0，第二个应提醒 1，依此类推。

Answer 1

for 循环在 JavaScript 中完成后，变量仍然存在。但是它们被设置为它们最终得到的任何值。所以 venue 是最终调用 click 函数时 response.markers 中的最后一项。

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

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 是一个命名函数）并且当您阅读它时也很清楚发生了什么。

Answer 2

你可以这样做：

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

避免与外场地.,

关闭

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

Interesting memory issue with event listeners

javascript

google-maps

google-maps-api-3