Замыкания в JS

Question

[Dmitry]

Есть массив объектов, для каждого объекта нужно назначить обработчик события наведения мышки, клика по объекту, движения мыши и т.д.

Вот код:

for (var i = 0; i < Obj.Sectors.length; i++) {

Obj.Sectors[i].mousemove(function (event) {

Obj.Popup(event.clientX, event.clientY, i);

});

}


Проблема в том, что при срабатывание события в функцию Popup всегда передается одинаковый счетчик цикла i, равный Obj.Sectors.length+1. Как это можно обойти?

Answer 1

[ArtemSmirnov]

Очень частая ошибка, попробуйте так:
<source language=«javascript>
for (var i = 0; i < Obj.Sectors.length; i++) {
(function (i) {
Obj.Sectors[i].mousemove(function (event) {
Obj.Popup(event.clientX, event.clientY, i);
});
})(i);
}

Comments

[ArtemSmirnov]

for (var i = 0; i < Obj.Sectors.length; i++) {
	(function (i) {
		Obj.Sectors[i].mousemove(function (event) {
			Obj.Popup(event.clientX, event.clientY, i);
		});
	})(i);
}

[Dmitry]

Круто, работает, спасибо.

Answer 2

[Quadratoff]

Может перестанем использовать старомодный for и перейдем на более читабельный и лаконичный each/map?

Obj.Sectors.each(function(sector, sectorIndex){
    sector.mousemove( function(event){
        Obj.Popup(event.clientX, event.clientY, sectorIndex);
    });
});

Answer 3

[homm]

Предложенный способ совсем не оптимальный. Лучше как-то привяжите данные непосредственно к объекту, а в обработчике их доставайте. Иначе для каждого обработчика у вас получается своя копия функции со своим замыканием.

Comments

[s0rr0w]

Поддерживаю. Замыкания в данном случае более вредны, чем полезны

[ArtemSmirnov]

Может быть тогда вы напишете решение?

[s0rr0w]

for (var i = 0; i < Obj.Sectors.length; i++) {
Obj.Sectors[i]._i_ = i;
Obj.Sectors[i].mousemove(function (event) {

Obj.Popup(event.clientX, event.clientY, this._i_);

});

}

[ArtemSmirnov]

Ток вот проблема, в вопросе нету условия что обработчик события применяется к элементу

[s0rr0w]

Тогда вам стоит сформулировать задачу более развернуто. Лучше всего выложить пример кода на тот же jsfiddle.net

[spmbt]

>Иначе для каждого обработчика у вас получается своя копия функции со своим замыканием
Копия? Разве не ссылка на вызов одной и той же функции с параметрами и окружениями из 1 переменной?