1

Здравствуйте.

Есть такой код:

for (var i = 0, len = items.length; i < len; i++) {

  items[i].addEventListener('click', function(e) {

    console.log(i);
    content_items[i].classList.toggle('open');
    content.classList.toggle('open');
    items[i].classList.toggle('open');

  }, false);
}

Код должен в цикле вешать обработчики на нужные элементы. Но при клике на любой из этих элементов в консоль вылезает ошибка.

Firefox:

TypeError: content_items[i] is undefined
2

Chrome:

2
Uncaught TypeError: Cannot read property 'classList' of undefined

Переменная len равна 2. Но как видно из логов, переменная i так же равна двум, всегда. И из-за этого обработчики вешаются на несуществующих элемент.

Собственно, сами вопросы: почему переменная i постоянно равна 2? Это как-то связанно с замыканиями? Как можно решить эту проблему?

1 ответ 1

4

Это потому-что переменная меняется, надо ее "локализовать", т.е. для каждого перехватчика события создать новую функцию :

for (var i = 0, len = items.length; i < len; i++) {

  items[i].addEventListener('click', set_handler(i),false);
}
function set_handler(i){
  return function (e) {
    console.log(i);
    content_items[i].classList.toggle('open');
    content.classList.toggle('open');
    items[i].classList.toggle('open');

  };
}

если функция хэндлера большая, то можно еще одну обертку сделать:

function set_handler(i){
  return function (e) {
    return real_handler(e,i);
  };
  function real_handler(e,i) {
    console.log(i);
    content_items[i].classList.toggle('open');
    content.classList.toggle('open');
    items[i].classList.toggle('open');

  }
}

такой способ экономит память, т.к на каждую итерацию цикла будет создана только маленькая новая функция, а большая будет вызываться всего-лишь.


пояснить этот эффект можно с помощью понятия области видимости (scope):

function a() {
  var i=0,c=1; 
  function b(e) {
    var c=0;
    //i определена в scope a; и изменение в этой области видимости
    // изменит i, а "c" и "e" заданы уже в b и локальны для неё
    console.log("b",i,c,e); //"b",1,0,3
  }
  i++;
  b(3);
  console.log("a",i,c); //"a",1,1 //здесь c принадлежит а
}

в вашем случае переменная i равна двум потому-что:

for (var i=0;i<2;i++) {};
console.log(i); //2

 items[i].addEventListener('click',function() { set_handler(i); },false);

не работает, потому что i в этой функции не объявлена никак и единственный способ её объявить это передать как параметр, но функция-callback setEventHandler вызывается с аргументом event, и надо как-то передать в её scope i, поэтому часто пишут так:

items[i].addEventListener('click',(function(i) {return function() { set_handler(i); };})(i),false);

но мне это кажется нагромождением, поэтому я вынес в отдельную функцию

насчет литературы не посоветую, сам я читаю в основном mdn и спеки, тут просто логика - когда мы делаем

return function() {}

мы создаем новую функцию, и если тело функции большое, то, я думаю, она ест больше памяти (я не уверен так-уж кстати, надо смотреть профайлеры в разных движках, может где-то такая ситуация и оптимизирована)

6
  • Т.е. я угадал и проблема в замыканиях? Скажите, почему такой способ не работает: items[i].addEventListener('click',function() { set_handler(i); },false); Каким образом второй способ экономит память, ведь создаётся ещё одна лишняя функция? Можете дать ссылки на качественную литературу где объясняется как и на что в JS расходуется память? Спасибо за помощь :)
    – LightShock
    18 ноя 2013 в 20:28
  • Эээ.. пока писал тот коммент ты уже дополнил свой ответ))
    – LightShock
    18 ноя 2013 в 20:30
  • И если позволишь, задам последний вопрос. Как ситуация изменится, если использовать не var, а let? Будет ли мой код работать? Хотел попробовать, но лиса с хромом ругаются на let.
    – LightShock
    18 ноя 2013 в 21:31
  • 1
    @LightShock, ну поможет, только не в таком виде, т.к. > Variables declared by let have as their scope the block in which they are defined, as well as in any sub-blocks in which they aren't redefined. In this way, let works very much like var. но в виде expression должно работать, проверить правда негде, в node тоже не работает.
    – zb'
    18 ноя 2013 в 22:02
  • 1
    @LightShock, jsbin.com/iVEfeloN/3 это в файрфоксе работает
    – zb'
    18 ноя 2013 в 22:33

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.