Если у вас такая проблема с циклом while, а не с циклом for, например:

var i = 0;
while (i < 5) {
  setTimeout(function() {
    console.log(i);
  }, i * 1000);
  i++;
}

Техника закрытия при превышении текущего значения немного отличается. Объявите переменную области блока с const внутри блока while и назначьте ей текущий i. Затем, где бы переменная ни использовалась асинхронно, замените i новой переменной с блочной областью видимости:

var i = 0;
while (i < 5) {
  const thisIterationI = i;
  setTimeout(function() {
    console.log(thisIterationI);
  }, i * 1000);
  i++;
}

Для старых браузеров, которые не поддерживают переменные с блочной областью видимости, вы можете использовать IIFE, вызываемый с i:

var i = 0;
while (i < 5) {
  (function(innerI) {
    setTimeout(function() {
      console.log(innerI);
    }, innerI * 1000);
  })(i);
  i++;
}

Если вызываемое асинхронное действие имеет вид setTimeout, как указано выше, вы также можете вызвать setTimeout с третьим параметром , чтобы указать аргумент для вызова переданной функции с помощью:

var i = 0;
while (i < 5) {
  setTimeout(
    (thisIterationI) => { // Callback
      console.log(thisIterationI);
    },
    i * 1000, // Delay
    i // Gets passed to the callback; becomes thisIterationI
  );
  i++;
}

До ES5, эта проблема может быть решена только с помощью закрытия .

Но теперь в ES6 у нас есть переменные области видимости блока. Изменение var на let в первом цикле for решит проблему.

var funcs = [];
for (let i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

При поддержке ES6 лучший способ добиться этого - использовать ключевые слова let и const именно для этого случая. Итак, переменная var получает hoisted, и с концом цикла значение i обновляется для всех closures ... мы можем просто использовать let, чтобы установить переменную области цикла следующим образом:

var funcs = [];
for (let i = 0; i < 3; i++) {          
    funcs[i] = function() {            
      console.log("My value: " + i); 
    };
}

Используйте let (blocked-scope) вместо var.

var funcs = [];
for (let i = 0; i < 3; i++) {      
  funcs[i] = function() {          
    console.log("My value: " + i); 
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      
}

  asyncIterable = [1,2,3,4,5,6,7,8];

  (async function() {
       for await (let num of asyncIterable) {
         console.log(num);
       }
    })();

Просто измените ключевое слово var на let.

var - это функция в области видимости.

пусть имеет область действия блока.

Когда вы начинаете кодировать, цикл for будет повторяться и присваивать значение i равному 3, которое останется равным 3 на протяжении всего кода. Предлагаю вам узнать больше об областях в узле (let, var, const и другие)

funcs = [];
for (let i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] =async function() {          // and store them in funcs
    await console.log("My value: " + i); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

Это доказывает, насколько уродливым является javascript в отношении того, как работают «закрытие» и «не закрытие».

В случае:

var funcs = [];

for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function() {          // and store them in funcs
    console.log("My value: " + i); // each should log its value.
  };
}

funcs [i] - это глобальная функция, а 'console.log ("My value:" + i);' печатает глобальную переменную i

В случае

var funcs = [];

function createfunc(i) {
    return function() { console.log("My value: " + i); };
}

for (var i = 0; i < 3; i++) {
    funcs[i] = createfunc(i);
}

из-за этого искаженного дизайна закрытия javascript, 'console.log ("Мое значение:" + i);' печатает i из внешней функции createfunc (i)

все потому, что javascript не может создать что-то приличное, например, «статическая» переменная внутри функции, подобной тому, что делает язык программирования C!

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = function(param) {          // and store them in funcs
    console.log("My value: " + param); // each should log its value.
  };
}
for (var j = 0; j < 3; j++) {
  funcs[j](j);                      // and now let's run each one to see with j
}

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

 var funcs = [];
    for (var i = 0; i < 3; i++) {
    // let's create 3 functions
    funcs[i] = function() {
    // and store them in funcs
    console.log("My value: " + i); // each should log its value.
    };
    funcs[i]();// and now let's run each one to see
    }

Хорошо. Я прочитал все ответы. Хотя здесь есть хорошее объяснение - я просто не мог заставить это работать. Я пошел искать в Интернете. Пользователь https://dzone.com/articles/why-does-javascript-loop-only-use-last-value получил ответ, которого здесь нет. Я решил опубликовать небольшой пример. Для меня это имело гораздо больше смысла.

Короче говоря, команда LET хороша, но используется только сейчас. ОДНАКО, команда LET на самом деле просто комбо TRY-CATCH. Это работает вплоть до IE3 (я считаю). Использование комбо TRY-CATCH - жизнь проста и хороша. Вероятно, поэтому люди из EMCScript решили его использовать. Также не требуется функция setTimeout (). Так что время не теряется. По сути, вам понадобится одна комбинация TRY-CATCH на цикл FOR. Вот пример:

    for( var i in myArray ){
       try{ throw i }
       catch(ii){
// Do whatever it is you want to do with ii
          }
       }

Если у вас более одного цикла FOR, вы просто добавляете комбинацию TRY-CATCH для каждого из них. Кроме того, лично я всегда использую двойную букву любой переменной FOR, которую я использую. Итак, «ii» вместо «i» и так далее. Я использую эту технику в подпрограмме для отправки команд при наведении указателя мыши на другую подпрограмму.

Допустим, вы не используете es6; Вы можете использовать функцию IFFY:

var funcs = [];
for (var i = 0; i < 13; i++) {      
funcs[i] = (function(x) {
console.log("My value: " + i)})(i);}

Но все будет иначе.

Хотя этот вопрос старый и на него дан ответ, у меня есть еще одно довольно интересное решение:

var funcs = [];

for (var i = 0; i < 3; i++) {     
  funcs[i] = function() {          
    console.log("My value: " + i); 
 };
}

for (var i = 0; i < 3; i++) {
  funcs[i]();
}

Изменение настолько незначительное, что почти трудно понять, что я сделал. Я переключил второй итератор с j на i. Это как-то вовремя обновляет состояние i, чтобы дать вам желаемый результат. Я сделал это случайно, но это имеет смысл, учитывая предыдущие ответы.

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

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

Мы проверим, что на самом деле происходит, когда вы объявляете var и let один за другим.

Случай1 : с использованием var

<script>
   var funcs = [];
   for (var i = 0; i < 3; i++) {
     funcs[i] = function () {
        debugger;
        console.log("My value: " + i);
     };
   }
   console.log(funcs);
</script>

Теперь откройте окно консоли Chrome , нажав F12 , и обновите страницу. Используйте каждые 3 функции внутри массива. Вы увидите свойство с именем [[Scopes]]. Разверните его. Вы увидите один объект массива с именем "Global", разверните его. Вы найдете свойство 'i', объявленное в объекте, имеющее значение 3.

Заключение:

1. Когда вы объявляете переменную с помощью 'var' вне функции, она становится глобальной переменной (вы можете проверить, набрав i или window.i в окне консоли. Будет возвращено 3).
2. Объявленная вами неприятная функция не будет вызывать и проверять значение внутри функции, если вы не вызовете функции.
3. Когда вы вызываете функцию, console.log("My value: " + i) берет значение из своего объекта Global и отображает результат.

CASE2: использование let

Теперь замените 'var' на 'let'

<script>
    var funcs = [];
    for (let i = 0; i < 3; i++) {
        funcs[i] = function () {
           debugger;
           console.log("My value: " + i);
        };
    }
    console.log(funcs);
</script>

Сделайте то же самое, перейдите к прицелам. Теперь вы увидите два объекта "Block" и "Global". Теперь разверните объект Block, вы будет видеть, что 'i' определено там, и странно то, что для каждой функции значение if i отличается (0, 1, 2).

Заключение :

Когда вы объявляете переменную с помощью 'let' даже вне функции, но внутри цикла, эта переменная не будет глобальной переменной, она станет переменной уровня Block, которая доступна только для той же функции. По этой причине мы получают значение i, различное для каждой функции, когда мы вызываем функции.

Для получения более подробной информации о том, как работает close, просмотрите потрясающий видеоурок https://youtu.be/71AtaJpJHw0

Этот вопрос действительно показывает историю JavaScript! Теперь мы можем избежать определения области видимости блока с помощью стрелочных функций и обрабатывать циклы непосредственно из узлов DOM с помощью методов объекта.

const funcs = [1, 2, 3].map(i => () => console.log(i));
funcs.map(fn => fn())

const buttons = document.getElementsByTagName("button");
Object
  .keys(buttons)
  .map(i => buttons[i].addEventListener('click', () => console.log(i)));

<button>0</button><br>
<button>1</button><br>
<button>2</button>

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

let arr = [1,2,3];

let myFunc = (val, index) => { console.log('val: '+val+'\nindex: '+index); };

arr.forEach(myFunc);

СЧЕТЧИК БЫЛ ПЕРВИЧНЫМ

Определим функции обратного вызова следующим образом:

// ****************************
// COUNTER BEING A PRIMITIVE
// ****************************
function test1() {
    for (var i=0; i<2; i++) {
        setTimeout(function() {
            console.log(i);
        });
    }
}
test1();
// 2
// 2

По истечении тайм-аута будет напечатано 2 для обоих. Это связано с тем, что функция обратного вызова обращается к значению на основе лексической области , в которой функция была определена.

Чтобы передать и сохранить значение, пока был определен обратный вызов, мы можем создать закрытие , чтобы сохранить значение перед вызовом обратного вызова. Это можно сделать следующим образом:

function test2() {
    function sendRequest(i) {
        setTimeout(function() {
            console.log(i);
        });
    }

    for (var i = 0; i < 2; i++) {
        sendRequest(i);
    }
}
test2();
// 1
// 2

Что особенного в этом, так это «Примитивы передаются по значению и копируются. Таким образом, когда закрытие определено, они сохраняют значение из предыдущего цикла».

СЧЕТЧИК ОБЪЕКТА

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

// ****************************
// COUNTER BEING AN OBJECT
// ****************************
function test3() {
    var index = { i: 0 };
    for (index.i=0; index.i<2; index.i++) {
        setTimeout(function() {
            console.log('test3: ' + index.i);
        });
    }
}
test3();
// 2
// 2

Таким образом, даже если закрытие создается для переменной, передаваемой как объект, значение индекса цикла не сохраняется. Это должно показать, что значения объекта не копируются, тогда как доступ к ним осуществляется по ссылке.

function test4() {
    var index = { i: 0 };
    function sendRequest(index, i) {
        setTimeout(function() {
            console.log('index: ' + index);
            console.log('i: ' + i);
            console.log(index[i]);
        });
    }

    for (index.i=0; index.i<2; index.i++) {
        sendRequest(index, index.i);
    }
}
test4();
// index: { i: 2}
// 0
// undefined

// index: { i: 2}
// 1
// undefined

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

var funcs = [];
for (var i = 0; i < 3; i++) {      // let's create 3 functions
  funcs[i] = curryShowValue(i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();                      // and now let's run each one to see
}

function curryShowValue(i) {
  return function showValue() {
    console.log("My value: " + i);
  }
}

См. прирост производительности в различных браузерах.

Используйте структуру закрытия, это уменьшит ваш дополнительный цикл for. Вы можете сделать это в одном цикле for:

var funcs = [];
for (var i = 0; i < 3; i++) {     
  (funcs[i] = function() {         
    console.log("My value: " + i); 
  })(i);
}

Функции JavaScript «закрывают» область действия, к которой они имеют доступ после объявления, и сохраняют доступ к этой области даже при изменении переменных в этой области.

var funcs = []

for (var i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

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

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

«Функции JavaScript закрываются за пределами области, в которой они объявлены, и сохраняют доступ к этой области даже при изменении значений переменных внутри этой области».

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

var funcs = []

for (let i = 0; i < 3; i += 1) {
  funcs[i] = function () {
    console.log(i)
  }
}

for (var k = 0; k < 3; k += 1) {
  funcs[k]()
}

(let делает переменные блоком области видимости. Блоки обозначаются фигурными скобками, но в случае цикла for переменная инициализации, i в нашем случае, считается объявленной в фигурных скобках.)

Воспользуемся преимуществом new Function. Таким образом, i перестает быть переменной замыкания и становится просто частью текста:

var funcs = [];
for (var i = 0; i < 3; i++) {
    var functionBody = 'console.log("My value: ' + i + '");';
    funcs[i] = new Function(functionBody);
}

for (var j = 0; j < 3; j++) {
    funcs[j]();
}

С помощью новых функций ES6 управление областью уровня блока:

var funcs = [];
for (let i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (let j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Код в вопросе OP заменяется на let вместо var <202>

Ваш код не работает, потому что он делает следующее:

Create variable `funcs` and assign it an empty array;  
Loop from 0 up until it is less than 3 and assign it to variable `i`;
    Push to variable `funcs` next function:  
        // Only push (save), but don't execute
        **Write to console current value of variable `i`;**

// First loop has ended, i = 3;

Loop from 0 up until it is less than 3 and assign it to variable `j`;
    Call `j`-th function from variable `funcs`:  
        **Write to console current value of variable `i`;**  
        // Ask yourself NOW! What is the value of i?

Теперь вопрос, каково значение переменной i при вызове функции? Поскольку первый цикл создается с условием i < 3, он немедленно останавливается, когда условие ложно, так что это i = 3.

Вы должны понимать, что во время создания ваших функций ни один их код не выполняется, он сохраняется только на потом. И поэтому, когда они вызываются позже, интерпретатор выполняет их и спрашивает: «Какое текущее значение i?»

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

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function(x) {            // and store them in funcs
        console.log("My value: " + x); // each should log its value.
    }.bind(null, i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

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

Это лишь один из множества способов решить эту проблему.

Прежде всего, разберитесь, что не так с этим кодом:

var funcs = [];
for (var i = 0; i < 3; i++) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Здесь, когда массив funcs[] инициализируется, увеличивается i, инициализируется массив funcs и размер массива func становится равным 3, поэтому i = 3,. Теперь, когда вызывается funcs[j](), он снова использует переменную i, которая уже увеличена до 3.

Теперь, чтобы решить эту проблему, у нас есть много вариантов. Ниже приведены два из них:

1. Мы можем инициализировать i с помощью let или инициализировать новую переменную index с помощью let и сделать ее равной i. Поэтому при выполнении вызова будет использоваться index, и его область действия завершится после инициализации. А для звонка снова будет инициализирован index:

   var funcs = [];
   for (var i = 0; i < 3; i++) {          
       let index = i;
       funcs[i] = function() {            
           console.log("My value: " + index); 
       };
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }
   

2. Другой вариант - ввести tempFunc, который возвращает фактическую функцию:

   var funcs = [];
   function tempFunc(i){
       return function(){
           console.log("My value: " + i);
       };
   }
   for (var i = 0; i < 3; i++) {  
       funcs[i] = tempFunc(i);                                     
   }
   for (var j = 0; j < 3; j++) {
       funcs[j]();                        
   }
   

И еще одно решение: вместо создания другого цикла просто привяжите this к функции возврата.

var funcs = [];

function createFunc(i) {
  return function() {
    console.log('My value: ' + i); //log value of i.
  }.call(this);
}

for (var i = 1; i <= 5; i++) {  //5 functions
  funcs[i] = createFunc(i);     // call createFunc() i=5 times
}

Связывание это также решает проблему.

Я предпочитаю использовать функцию forEach, которая имеет собственное закрытие с созданием псевдодиапазона:

var funcs = [];

new Array(3).fill(0).forEach(function (_, i) { // creating a range
    funcs[i] = function() {            
        // now i is safely incapsulated 
        console.log("My value: " + i);
    };
});

for (var j = 0; j < 3; j++) {
    funcs[j](); // 0, 1, 2
}

Это выглядит уродливее, чем диапазоны на других языках, но ИМХО менее чудовищно, чем другие решения.

Вы можете использовать декларативный модуль для списков данных, таких как query-js (*). В таких ситуациях я лично нахожу декларативный подход менее удивительным

var funcs = Query.range(0,3).each(function(i){
     return  function() {
        console.log("My value: " + i);
    };
});

Затем вы можете использовать второй цикл и получить ожидаемый результат или сделать

funcs.iterate(function(f){ f(); });

(*) Я являюсь автором query-js и поэтому склоняюсь к его использованию, поэтому не воспринимайте мои слова как рекомендацию для указанной библиотеки только для декларативного подхода :)

Эта проблема часто встречается с асинхронным кодом, переменная i является изменяемой, и в то время, когда выполняется вызов функции, код с использованием i будет выполнен, а i будет изменен до последнего значение, что означает, что все функции, созданные в цикле, будут создавать замыкание, а i будет равно 3 (верхняя граница + 1 цикла for.

Обходной путь к этому - создать функцию, которая будет хранить значение i для каждой итерации и принудительно копировать i (поскольку это примитив, подумайте о нем как о снимке, если он вам поможет) .

Немного поздно для вечеринки, но я изучал эту проблему сегодня и заметил, что многие ответы не полностью касаются того, как Javascript обрабатывает области, что, по сути, и сводится к тому, к чему это сводится.

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

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    var ilocal = i; //create a new local variable
    funcs[i] = function() {
        console.log("My value: " + ilocal); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Как и раньше, когда каждая внутренняя функция выводила последнее значение, присвоенное i, теперь каждая внутренняя функция просто выводит последнее значение, присвоенное ilocal. Но разве не должна каждая итерация иметь свой собственный ilocal?

Оказывается, в этом проблема. Каждая итерация имеет одну и ту же область видимости, поэтому каждая итерация после первой просто перезаписывает ilocal. От MDN:

Важно: JavaScript не имеет области блока. Переменные, представленные с блоком, ограничиваются содержащейся функцией или скриптом, и эффекты их установки сохраняются за пределами самого блока. Другими словами, блочные операторы не вводят область видимости. Хотя "автономные" блоки являются допустимым синтаксисом, вы не хотите использовать автономные блоки в JavaScript, потому что они не делают того, что вы думаете, если вы думаете, что они делают что-то вроде таких блоков в C или Java.

Повторюсь для выделения:

JavaScript не имеет области блока. Переменные, введенные с блоком, ограничены функцией или сценарием

Мы можем увидеть это, проверив ilocal перед тем, как объявлять его на каждой итерации:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
  console.log(ilocal);
  var ilocal = i;
}

Именно поэтому эта ошибка так сложна. Даже если вы повторно объявляете переменную, Javascript не выдаст ошибку, а JSLint даже не выдаст предупреждение. Вот почему лучший способ решить эту проблему - воспользоваться преимуществами замыканий, что, по сути, заключается в том, что в Javascript внутренние функции имеют доступ к внешним переменным, потому что внутренние области видимости «охватывают» внешние области.

Это также означает, что внутренние функции «держатся» за внешние переменные и сохраняют их в действии, даже если внешняя функция возвращается. Чтобы использовать это, мы создаем и вызываем функцию-оболочку исключительно для создания новой области, объявляем ilocal в новой области и возвращаем внутреннюю функцию, которая использует ilocal (более подробное объяснение ниже):

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() { //create a new scope using a wrapper function
        var ilocal = i; //capture i into a local var
        return function() { //return the inner function
            console.log("My value: " + ilocal);
        };
    })(); //remember to run the wrapper function
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Создание внутренней функции внутри функции-оболочки дает внутренней функции закрытое окружение, к которому может получить доступ только она, «закрытие». Таким образом, каждый раз, когда мы вызываем функцию-оболочку, мы создаем новую внутреннюю функцию с ее собственным отдельным окружением, гарантируя, что переменные ilocal не конфликтуют и не перезаписывают друг друга. Несколько незначительных оптимизаций дают окончательный ответ, который дали многие другие пользователи SO:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (var i = 0; i < 3; i++) {
    funcs[i] = wrapper(i);
}
for (var j = 0; j < 3; j++) {
    funcs[j]();
}
//creates a separate environment for the inner function
function wrapper(ilocal) {
    return function() { //return the inner function
        console.log("My value: " + ilocal);
    };
}

Обновить

Поскольку ES6 стал основным, теперь мы можем использовать новое ключевое слово let для создания переменных с блочной областью видимости:

//overwrite console.log() so you can see the console output
console.log = function(msg) {document.body.innerHTML += '<p>' + msg + '</p>';};

var funcs = {};
for (let i = 0; i < 3; i++) { // use "let" to declare "i"
    funcs[i] = function() {
        console.log("My value: " + i); //each should reference its own local variable
    };
}
for (var j = 0; j < 3; j++) { // we can use "var" here without issue
    funcs[j]();
}

Посмотрите, как это теперь просто! Для получения дополнительной информации см. Этот ответ, на котором основана моя информация.

Я удивлен, что никто еще не предложил использовать функцию forEach, чтобы лучше избежать (повторного) использования локальных переменных. Фактически, я больше не использую for(var i ...) по этой причине.

[0,2,3].forEach(function(i){ console.log('My value:', i); });
// My value: 0
// My value: 2
// My value: 3

// отредактировано для использования forEach вместо map.

Прочитав различные решения, я хотел бы добавить, что причина, по которой эти решения работают, заключается в том, чтобы полагаться на концепцию цепочки областей видимости . Это способ, которым JavaScript разрешает переменную во время выполнения.

• Каждое определение функции формирует область, состоящую из всех локальных переменные, объявленные var и его arguments.
• Если у нас есть внутренняя функция, определенная внутри другой (внешней) функции, это образует цепочку и будет использоваться во время выполнения
• Когда функция запускается, среда выполнения оценивает переменные путем поиска в цепочке областей видимости . Если переменная может быть найдена в определенной точке цепочки, она прекратит поиск и будет использовать ее, в противном случае он будет продолжаться до тех пор, пока не будет достигнута глобальная область видимости, принадлежащая window.

В исходном коде:

funcs = {};
for (var i = 0; i < 3; i++) {         
  funcs[i] = function inner() {        // function inner's scope contains nothing
    console.log("My value: " + i);    
  };
}
console.log(window.i)                  // test value 'i', print 3

При выполнении funcs цепочка областей видимости будет function inner -> global. Поскольку переменная i не может быть найдена в function inner (не объявлена ​​с использованием var и не передана в качестве аргументов), она продолжает поиск, пока значение i в конечном итоге не будет найдено в глобальной области видимости, которая равна window.i .

Обернув его во внешнюю функцию, либо явно определите вспомогательную функцию, как это сделал harto, либо используйте анонимную функцию, как это сделал Бьорн:

funcs = {};
function outer(i) {              // function outer's scope contains 'i'
  return function inner() {      // function inner, closure created
   console.log("My value: " + i);
  };
}
for (var i = 0; i < 3; i++) {
  funcs[i] = outer(i);
}
console.log(window.i)          // print 3 still

При выполнении funcs теперь цепочка областей видимости будет function inner -> function outer. На этот раз i можно найти в области внешней функции, которая выполняется 3 раза в цикле for, каждый раз имеет значение i, привязанное правильно. Он не будет использовать значение window.i при внутреннем выполнении.

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

Вот простое решение, использующее forEach (работает с IE9):

var funcs = [];
[0,1,2].forEach(function(i) {          // let's create 3 functions
    funcs[i] = function() {            // and store them in funcs
        console.log("My value: " + i); // each should log its value.
    };
})
for (var j = 0; j < 3; j++) {
    funcs[j]();                        // and now let's run each one to see
}

Печать:

My value: 0
My value: 1
My value: 2

Основная проблема с кодом, показанным OP, заключается в том, что i никогда не читается до второго цикла. Для демонстрации представьте, что вы видите ошибку внутри кода

funcs[i] = function() {            // and store them in funcs
    throw new Error("test");
    console.log("My value: " + i); // each should log its value.
};

На самом деле ошибка не возникает, пока funcs[someIndex] не будет выполнен (). Используя ту же логику, должно быть очевидно, что значение i также не собирается до этого момента. После завершения исходного цикла i++ преобразует i в значение 3, что приводит к сбою условия i < 3 и завершению цикла. На этом этапе i равно 3, поэтому, когда используется funcs[someIndex]() и вычисляется i, каждый раз он равен 3.

Чтобы обойти это, вы должны вычислить i при его обнаружении. Обратите внимание, что это уже произошло в форме funcs[i] (где есть 3 уникальных индекса). Есть несколько способов зафиксировать это значение. Один из них - передать его как параметр функции, которая уже здесь показана несколькими способами.

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

jsFiddle Demo

funcs[i] = new function() {   
    var closedVariable = i;
    return function(){
        console.log("My value: " + closedVariable); 
    };
};

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

for (var i = 0; i < 3; i++) {

    (function(index) {

        console.log('iterator: ' + index);
        //now you can also loop an ajax call here 
        //without losing track of the iterator value:   $.ajax({});
    
    })(i);

}

Это отправляет итератор i в анонимную функцию, которую мы определяем как index. Это создает закрытие, где переменная i сохраняется для дальнейшего использования в любых асинхронных функциях в IIFE.

Другой способ, который еще не упоминался, - это использование Function.prototype.bind

var funcs = {};
for (var i = 0; i < 3; i++) {
  funcs[i] = function(x) {
    console.log('My value: ' + x);
  }.bind(this, i);
}
for (var j = 0; j < 3; j++) {
  funcs[j]();
}

ОБНОВЛЕНИЕ

Как указано в @squint и @mekdev, вы получите лучшую производительность, если сначала создадите функцию вне цикла, а затем привяжете результаты внутри цикла.

function log(x) {
  console.log('My value: ' + x);
}

var funcs = [];

for (var i = 0; i < 3; i++) {
  funcs[i] = log.bind(this, i);
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

попробуйте этот покороче

• без массива

• без дополнительных операций для цикла

for (var i = 0; i < 3; i++) {
    createfunc(i)();
}

function createfunc(i) {
    return function(){console.log("My value: " + i);};
}

http://jsfiddle.net/7P6EN/

Самое простое решение:

Вместо использования:

var funcs = [];
for(var i =0; i<3; i++){
    funcs[i] = function(){
        alert(i);
    }
}

for(var j =0; j<3; j++){
    funcs[j]();
}

, который 3 раза предупреждает "2". Это связано с тем, что анонимные функции, созданные в цикле for, имеют одно и то же закрытие, и в этом закрытии значение i то же самое. Используйте это, чтобы предотвратить совместное закрытие:

var funcs = [];
for(var new_i =0; new_i<3; new_i++){
    (function(i){
        funcs[i] = function(){
            alert(i);
        }
    })(new_i);
}

for(var j =0; j<3; j++){
    funcs[j]();
}

Идея заключается в том, чтобы инкапсулировать все тело цикла for с помощью IIFE (выражение немедленного вызова функции) и передать new_i в качестве параметра и записать его как i. Поскольку анонимная функция выполняется немедленно, значение i отличается для каждой функции, определенной внутри анонимной функции.

Это решение, кажется, подходит для любой подобной проблемы, поскольку потребует минимальных изменений исходного кода, страдающего от этой проблемы. На самом деле это сделано намеренно, это не должно быть проблемой!

Теперь, когда ES6 широко поддерживается, лучший ответ на этот вопрос изменился. ES6 предоставляет ключевые слова let и const именно для этого случая. Вместо того, чтобы возиться с замыканиями, мы можем просто использовать let для установки переменной области цикла следующим образом:

var funcs = [];

for (let i = 0; i < 3; i++) {          
    funcs[i] = function() {            
      console.log("My value: " + i); 
    };
}

val затем будет указывать на объект, специфичный для этого конкретного поворота цикла, и вернет правильное значение без дополнительной нотации замыкания. Это, очевидно, значительно упрощает эту проблему.

const аналогичен let с дополнительным ограничением, что имя переменной не может быть повторно привязано к новой ссылке после первоначального назначения.

Поддержка браузеров доступна для тех, кто ориентируется на последние версии браузеров. const / let в настоящее время поддерживаются в последних версиях Firefox, Safari, Edge и Chrome. Он также поддерживается в Node, и вы можете использовать его где угодно, воспользовавшись преимуществами таких инструментов сборки, как Babel. Здесь вы можете увидеть рабочий пример: http://jsfiddle.net/ben336/rbU4t/2/

Документы здесь:

• конст
• лет

Однако помните, что IE9-IE11 и Edge до Edge 14 поддерживают let, но ошибаются в приведенном выше (они не создают каждый раз новый i, поэтому все вышеперечисленные функции будут регистрировать 3, как они было бы, если бы мы использовали var). Edge 14 наконец-то понял это правильно.

Здесь описывается распространенная ошибка при использовании замыканий в JavaScript.

Функция определяет новую среду

Рассмотрим:

function makeCounter()
{
  var obj = {counter: 0};
  return {
    inc: function(){obj.counter ++;},
    get: function(){return obj.counter;}
  };
}

counter1 = makeCounter();
counter2 = makeCounter();

counter1.inc();

alert(counter1.get()); // returns 1
alert(counter2.get()); // returns 0

Каждый раз, когда вызывается makeCounter, {counter: 0} приводит к созданию нового объекта. Также новая копия obj также создается для ссылки на новый объект. Таким образом, counter1 и counter2 не зависят друг от друга.

Замыкания в петлях

Использовать замыкание в петле сложно.

Рассмотрим:

var counters = [];

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = {
      inc: function(){obj.counter++;},
      get: function(){return obj.counter;}
    }; 
  }
}

makeCounters(2);

counters[0].inc();

alert(counters[0].get()); // returns 1
alert(counters[1].get()); // returns 1

Обратите внимание, что counters[0] и counters[1] не независимы. Фактически, они работают на одном и том же obj!

Это связано с тем, что для всех итераций цикла используется только одна копия obj, возможно, из соображений производительности. Несмотря на то, что {counter: 0} создает новый объект на каждой итерации, та же копия obj будет просто обновляться с помощью ссылка на новейший объект.

Решение - использовать другую вспомогательную функцию:

function makeHelper(obj)
{
  return {
    inc: function(){obj.counter++;},
    get: function(){return obj.counter;}
  }; 
}

function makeCounters(num)
{
  for (var i = 0; i < num; i++)
  {
    var obj = {counter: 0};
    counters[i] = makeHelper(obj);
  }
}

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

Вот еще один вариант техники, похожий на метод Бьорна (apphacker), который позволяет вам присваивать значение переменной внутри функции, а не передавать ее в качестве параметра, что иногда может быть яснее:

var funcs = [];
for (var i = 0; i < 3; i++) {
    funcs[i] = (function() {
        var index = i;
        return function() {
            console.log("My value: " + index);
        }
    })();
}

Обратите внимание, что какой бы метод вы ни использовали, переменная index становится своего рода статической переменной, привязанной к возвращаемой копии внутренней функции. Т.е. изменения его значения сохраняются между вызовами. Это может быть очень удобно.

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

Когда вы создаете замыкание, i является ссылкой на переменную, определенную во внешней области, а не ее копией, как это было при создании замыкания. Он будет оценен во время выполнения.

Большинство других ответов предоставляют способы обойти проблему, создав другую переменную, которая не изменит значение для вас.

Просто подумал, что добавлю пояснение для ясности. Для решения лично я бы пошел с Харто, поскольку это наиболее очевидный способ сделать это из ответов здесь. Любой опубликованный код будет работать, но я бы предпочел фабрику закрытия, а не необходимость писать кучу комментариев, чтобы объяснить, почему я объявляю новую переменную (Фредди и 1800) или использую странный встроенный синтаксис закрытия (apphacker).

Что вам нужно понять, так это то, что объем переменных в javascript основан на функции. Это важное отличие от C #, где у вас есть область видимости блока, и простое копирование переменной в переменную внутри for будет работать.

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

Существует также ключевое слово let вместо var, которое позволяет использовать правило области блока. В этом случае определение переменной внутри for поможет. Тем не менее, ключевое слово let не является практическим решением из-за совместимости.

var funcs = {};

for (var i = 0; i < 3; i++) {
  let index = i; //add this
  funcs[i] = function() {
    console.log("My value: " + index); //change to the copy
  };
}

for (var j = 0; j < 3; j++) {
  funcs[j]();
}

Причина, по которой ваш исходный пример не работает, заключается в том, что все замыкания, созданные вами в цикле, ссылаются на один и тот же фрейм. Фактически, наличие трех методов для одного объекта с одной переменной i. Все они распечатали одно и то же значение.

Попробуйте:

var funcs = [];
    
for (var i = 0; i < 3; i++) {
    funcs[i] = (function(index) {
        return function() {
            console.log("My value: " + index);
        };
    }(i));
}

for (var j = 0; j < 3; j++) {
    funcs[j]();
}

Изменить (2014):

Лично я думаю, что более свежий ответ @ Aust об использовании .bind - лучший способ сделать это сейчас. Также есть _.partial с нижним тире / подчеркиванием, если вам не нужно или вы не хотите возиться с thisArg bind.