Проблемы с циклом JavaScript, добавляющим GMarker в GMap

Question

У меня проблемы с добавлением GMarkers при использовании цикла.Лучший способ объяснить проблему - показать код, я думаю:)

Это работает:

htmls[0] = "<div style=\"margin-bottom:10px; \"><table><tr><td><img src=\"" + result[0].UserImageURI + "\" width=\"80\" height=\"80\" /></td><td style=\"vertical-align:top; \"><strong>" + result[0].Username + "</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + result[1].Age + ")<br/>" + result[0].Country + "<br/>" + result[0].Distance + " KMs away<br/><a href=\"profile.aspx?lfid=" + result[0].Userid + "\">View Profile</a></td></tr></table></div>";
    latlngs[0] = new GLatLng(result[0].Latitude, result[0].Longitude);
    if (result[0].Gender == "F") {
        markers[0] = new GMarker(latlngs[0], { draggable: false, icon: fIcon });
    } else {
        markers[0] = new GMarker(latlngs[0], { draggable: false, icon: mIcon });
    }
    GEvent.addListener(markers[0], "click", function () {
        markers[0].openInfoWindowHtml(htmls[0]);
    });
    map.addOverlay(markers[0]);
    htmls[1] = "<div style=\"margin-bottom:10px; \"><table><tr><td><img src=\"" + result[1].UserImageURI + "\" width=\"80\" height=\"80\" /></td><td style=\"vertical-align:top; \"><strong>" + result[1].Username + "</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + result[1].Age + ")<br/>" + result[1].Country + "<br/>" + result[1].Distance + " KMs away<br/><a href=\"profile.aspx?lfid=" + result[1].Userid + "\">View Profile</a></td></tr></table></div>";
    latlngs[1] = new GLatLng(result[1].Latitude, result[1].Longitude);
    if (result[1].Gender == "F") {
        markers[1] = new GMarker(latlngs[1], { draggable: false, icon: fIcon });
    } else {
        markers[1] = new GMarker(latlngs[1], { draggable: false, icon: mIcon });
    }
    GEvent.addListener(markers[1], "click", function () {
        markers[1].openInfoWindowHtml(htmls[1]);
    });
    map.addOverlay(markers[1]);

Но когда я помещаю его в цикл, он не работает...

for (i = 0; i < result.length; i++) {
        htmls[i] = "<div style=\"margin-bottom:10px; \"><table><tr><td><img src=\"" + result[i].UserImageURI + "\" width=\"80\" height=\"80\" /></td><td style=\"vertical-align:top; \"><strong>" + result[i].Username + "</strong>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; (" + result[i].Age + ")<br/>" + result[i].Country + "<br/>" + result[i].Distance + " KMs away<br/><a href=\"profile.aspx?lfid=" + result[i].Userid + "\">View Profile</a></td></tr></table></div>";
        latlngs[i] = new GLatLng(result[i].Latitude, result[i].Longitude);
        if (result[i].Gender == "F") {
            markers[i] = new GMarker(latlngs[i], { draggable: false, icon: fIcon });
        } else {
            markers[i] = new GMarker(latlngs[i], { draggable: false, icon: mIcon });
        }
        GEvent.addListener(markers[i], "click", function () {
            markers[i].openInfoWindowHtml(htmls[i]);
        });
        map.addOverlay(markers[i]);
    }

При использовании цикла нажатие на маркер нарушает работу скрипта.Он указывает на строку

markers [i] .openInfoWindowHtml (htmls [i]);

и говорит, что объект не определен.Это также говорит, что я = 10 в этой точке, что "невозможно", как результат. Длина составляет всего 10

Answer 1

Проблема заключается в классической функции в цикле .Вот один из двух типичных способов исправить это:

function callback(i) {
    return function () {
        markers[i].openInfoWindowHtml(htmls[i]);
    };
}

for (i = 0; i < result.length; i++) {
    // snip...

    GEvent.addListener(markers[i], "click", callback(i));

    // snip...   
}

JSLint может легко перехватить эти распространенные ошибки. @ Ответ Алекса показывает примерно другой типичный способ решения этой проблемы, но с несколькими ошибками.Это должно работать, хотя:

for (i = 0; i < result.length; i++) {
    // snip...

    GEvent.addListener(markers[i], "click", (function (i) {
        return function () {
            markers[i].openInfoWindowHtml(htmls[i]);
        }
    })(i));

    // snip...   
}

Answer 2

В этом фрагменте кода ...

GEvent.addListener(markers[i], "click", function () {
        markers[i].openInfoWindowHtml(htmls[i]);
});

... функция закрывается на i в родительской области видимости.Таким образом, он обращается к самой переменной, , а не ее копии.

В конце цикла, когда ваша функция обращается к переменной i, она будет равна любому условиюостановил цикл, 10 в вашем примере.

Вы можете исправить это с помощью самопризывающейся анонимной функции, которая передает значение в новую переменную с ограниченным сроком жизни ...

(function(j) {  
    GEvent.addListener(markers[j], "click", function () {
           markers[j].openInfoWindowHtml(htmls[j]);
    });
})(i);

Вот пример работающего аналогичного кода.