JS通过调用或不调用函数的反应不同（使用了Google Maps API）

Question

I experienced strange behaviour by calling or not calling a separate function in JavaScript code. I am not able to comprehend the difference in result – from my point of view the exact same result should appear.

The following code is the working one. It sets the InfoWindow onto the markers and the links.

for (loc in alleDaten) {
        place = alleDaten[loc];
        place['marker'] = new google.maps.Marker({position:place.pos, icon:'marker2.png'});
        place.marker.setMap(map);
        doEverything(place);
    }
    function doEverything(place) {
        google.maps.event.addListener(place.marker, 'click', function() {setInfowindow(place.text, place.marker);});
        $(place.link).click(function() {setInfowindow(place.text, place.marker);});
    }
    function setInfowindow(text, marker) {
        infowindow.setContent(text); 
        infowindow.open(map, marker);
    }

The following code is almost the same, only the function call is removed. But the result is different: only the last entry of alleDaten is set to all markers and all links.

for (loc in alleDaten) {
    place = alleDaten[loc];
    place['marker'] = new google.maps.Marker({position:place.pos, icon:'marker2.png'});
    place.marker.setMap(map);
    google.maps.event.addListener(place.marker, 'click', function() {setInfowindow(place.text, place.marker);});
    $(place.link).click(function() {setInfowindow(place.text, place.marker);});
}
function setInfowindow(text, marker) {
    infowindow.setContent(text); 
    infowindow.open(map, marker);
}

Is there a reason for this behaviour?

Answer 1

The two work differently because you have async code that references a local variable place that is changed in the for loop before the async code runs in your second block of code. When you pass the place variable to a function in the first block of code, that creates a closure that maintains that variable's value separately for each invocation of the function so the event handling callbacks will refer to the correct version of place in the first block of code.

Whereas, In your second block of code, the place variable that is referenced inside the two click handlers will have long since changed by the for loop before the click handler is called.

Remember, your for loop will run to completion (thus place will have the last value in it) before any of your click handler callbacks are actually called. This same type of mistake is very common with a for loop index too. The general solution is to create a closure that captures that changing variable for each separate path through the loop. Passing it to a function as you've done in your first code block is one way to do that.