Object creation in loop broken; unrolled works

Question

I'm doing some testing and ran into this bizarre situation: The first case (assigning objects like InfoWindows in a loop) does not work as expected, while writing the assignments one by one does work.

The expected behavior is for an InfoWindow to open when the mouse is over a marker. Many windows should stay open at the same time.

Superficially, I don't see any difference. What's going on? I'm showing relevant code and a full JSFiddle for each case.

Does not work JSFiddle

    iwArray = [];
    for (var i = 0; i < 3; i++) {
      iwArray[i] = new google.maps.InfoWindow({content: "w "});
      google.maps.event.addListener(marker[i], 'mouseover', function(e) {
        iwArray[i].open(map, this);
      });
    }

Works, but is ugly JSFiddle

    iwArray = [];

    iwArray[0] = new google.maps.InfoWindow({content: "w 0"});
    google.maps.event.addListener(marker[0], 'mouseover', function(e) {
      iwArray[0].open(map, this);
    });

    iwArray[1] = new google.maps.InfoWindow({content: "w 1"});
    google.maps.event.addListener(marker[1], 'mouseover', function(e) {   
      iwArray[1].open(map, marker[1]);
    });

    iwArray[2] = new google.maps.InfoWindow({content: "w 2"});
    google.maps.event.addListener(marker[2], 'mouseover', function(e) {
      iwArray[2].open(map, marker[2]);
    });

possible duplicate of [Make List of several "GM_listValues", calling a function to remove themselves](http://stackoverflow.com/questions/10073870/make-list-of-several-gm-listvalues-calling-a-function-to-remove-themselves) — Rob W, Apr 10 '12 at 19:48
possible duplicate of [Javascript: closure of loop?](http://stackoverflow.com/questions/5555464/javascript-closure-of-loop) — Lekensteyn, Apr 10 '12 at 19:49

score 3 · Answer 1 · edited Apr 10 '12 at 19:52

3

var iwArray = [];
for (var i = 0; i < 3; i++) {
  iwArray[i] = new google.maps.InfoWindow({content: "w " + i });
  google.maps.event.addListener(marker[i], 'mouseover', createListener(i, map));
}

function createListener(i, map) {
    return function(e) {
        iwArray[i].open(map, this);
    };
}

edited Apr 10 '12 at 19:52

Rob W

341,306
83
791
678

answered Apr 10 '12 at 19:48

score 3 · Accepted Answer · answered Apr 10 '12 at 19:49

3

Use closure:

 for (var i = 0; i < 3; i++) {
    (function(i){
       iwArray[i] = new google.maps.InfoWindow({content: "w "});
       google.maps.event.addListener(marker[i], 'mouseover', function(e) {
          iwArray[i].open(map, this);
       });
    })(i);
}

answered Apr 10 '12 at 19:49

Engineer

47,849
12
88
91

Great answer again, and to the point. Thank you. You are like a professor :) – Heitor Chang Apr 10 '12 at 20:05

Object creation in loop broken; unrolled works

2 Answers2

Linked