Javascript функция вопрос

Question

Я искал, но не мог найти ответ на этот, казалось бы, простой вопрос, так что ...

Предположим, у меня есть цикл, в котором мне нужно установить обратные вызовы. Моя функция обратного вызова выглядит следующим образом:

function callback(var1) { // code }

Теперь мой цикл выглядит примерно так:

for( //condition)
{
  var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function() { callback(x); }, false);
}

Теперь похоже, что даже если цикл выполняется n раз, анонимная функция компилируется только один раз - и, следовательно, каждый вызов обратного вызова вызывается с одним и тем же аргументом (даже если x изменяется в цикле каждый раз). *

Я, должно быть, что-то здесь упускаю ... любая помощь очень ценится! :)

Answer 1

См. Создание замыканий в циклах: распространенная ошибка

и смежные вопросы:

• Закрытие JavaScript внутри циклов - простой практический пример
• Разве JavaScript не поддерживает замыкания с локальными переменными?
• Доступ к внешней переменной в цикле из закрытия Javascript
• Как работают закрытия JavaScript?

Answer 2

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

Используйте другую функцию для создания новой лексической среды для хранения значения x на каждой итерации:

for(/*condition*/) {
  var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function () {
    return function(y) {
      callback(y);
    };
  }(x), false);
}

Answer 3

Вы должны вычислить x перед вызовом функции обратного вызова!

for( //condition)
{
  //var x = something_different_each_time;
  document.getElementById('foo').addEventListener('click', function() { 
   var x = something_different_each_time;
   callback(x); }, false);
}

Answer 4

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

.addEventListener(
    'click',
    (function (i) {
        return function () { callback(i); }
    })(x),
    false
);

Это создает замыкание с текущим значением x, заблокированным внутри.