In Google Maps v3, does removing a marker from memory automatically kill any listeners?
In my Google Maps v3 app, I am Creating Markers and putting them on the map. For each, I am adding an event listener on 'click' so I can show an Info Window when a user clicks on them.
I am keeping my Markers in a javascript array and use .setMap() to show/hide them on the map. There are some cases where a user wants them deleted from the map. In this case I do marker.setMap(null) and then delete the marker from my array.
Is it recommended to also keep an array of the event listeners on the markers so I can remove those when I delete the marker? Or will t开发者_运维问答he event listener get removed from memory when it's listened-to object is removed from memory?
From an end-user standpoint, I don't think it matters to do this, but I am curious if the event listener is still in memory somewhere even though I delete the marker. I'd like to be as tidy as possible.
I don't know for sure if the listeners are removed, but my guess is not. My guess is that since the listener is still listening, even though you no longer have a reference to the object, the listener does, so it will remain in memory. You don't need to keep a reference to the listener, you can call
google.maps.event.clearInstanceListeners(marker);
to clear all listeners before you delete it from your array.
As far as I can tell, the listeners are removed from memory.
Theoretically, this is probably because the listeners don't actively listen as such - Google Maps only stores them in the relevant feature, and then asks that feature which listeners it has when an event is fired.
Practically, I ran a test, and these are the results:
Tabs 1 and 2 create a point with 20000 listeners, and track the listeners.
Tab 3 creates a point with 20000 listeners, but doesn't track them.
Stage 1 is after they've got the listeners.
Stage 2 is after they've dropped something (tab 1: point, 2: listeners, 3: point)
Stage 3 is after they've dropped the other (tab 1: listeners, 2: point, 3: no change (listeners dropped implicitly at stage 2) )
Tab PID Memory (live, K) at stage...
1 2 3
1 4643 18194 16026 8265
2 4659 18174 8155 8227
3 4676 17750 8152 8202Memory usage in JS is absurdly hard to track, partly (I suspect) because of the automatic garbage collector. To get these results I used chrome's built in task manager, and after each major step of the experiment cycled a large chunk of memory into and then out of use to force the garbage collector's hand.
One curiosity here is that when tab 1 drops the point, it loses about 2000K memory, while when tab 2 drops the point, it gains 77K (a negligible change given the volatility of memory usage). I suspect this is because tab 1 drops a point with 20000 listeners attached, while tab 2 drops a bare point.
Here's the source I used. I'm not providing a fiddle link, because fiddle just makes tracking memory usage even harder :/
html (insert your own API key):
<!DOCTYPE html>
<html>
<head>
<style type="text/css">
html, body {height: 100%; width: 100%;}
#map {width: 100%; height: 80%;}
</style>
</head>
<body>
<h1>Welcome to MapLand, home of a single map.</h1>
<div id="map"></div>
<button onclick="addPts(true);">add points (store listeners)</button>
<button onclick="addPts(false);">add points (don't store listeners)</button>
--------
<button onclick="deletePts();">delete points</button>
<button onclick="deleteLs();">delete listeners</button>
--------
<button onclick="checkListenerVar();">check listener var</button>
<button onclick="cycleLargeChunk();">cycle large chunk</button>
</body>
<script src="test2.js"></script>
<script async src="https://maps.googleapis.com/maps/api/js?key=AIzaSyAorBo-zMFJo9viqdv3pkuhMyg5hytpbaQ&callback=initMap"></script>
</html>
JS (test2.js):
var uluru = {lat: -25.363, lng: 131.044};
var map;
function initMap() {
map = new google.maps.Map(document.getElementById('map'), {
zoom: 4,
center: uluru
});
}
var ptLat = uluru.lat, ptLng = uluru.lng;
var pts = []; // points
var ls = []; // listeners
var listenerVar;
function addPts(storeLs) {
var m = new google.maps.Marker({
position: {lat: ptLat, lng: ptLng},
map: map
});
ptLng += 1;
if (ptLng > uluru.lng + 20) {
ptLng = uluru.lng;
ptLat += 1;
}
pts.push(m);
for (var i = 50000; i > 0; i--) {
var l = google.maps.event.addListener(m, 'click', function () {listenerVar = i;});
if (storeLs) ls.push(l);
}
}
function deletePts() {
for (var i = pts.length-1; i >= 0; i--) pts[i].setMap(null);
pts = [];
ptLat = uluru.lat;
ptLng = uluru.lng;
}
function deleteLs() {
for (var i = ls.length-1; i >= 0; i--) ls[i].remove();
ls = [];
}
function checkListenerVar() {
alert("Listener var is " + listenerVar + ", but is being reset to -1.");
listenerVar = -1;
}
function cycleLargeChunk() {
var l = [0];
for (var i = 0; i < 26; i++) {
l = l.concat(l);
}
//Force the environment to hang on to l for at least a second.
setTimeout(function () {console.log(l.length);}, 1000);
}
加载中,请稍侯......
精彩评论