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

Классическое решение: Закрытие

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

var funcs = [];

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

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

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

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

2015 Решение: forEach

. При относительно широкой доступности функции Array.prototype.forEach (в 2015 году) стоит отметить, что в тех ситуациях, в которых задействована итерация в основном по массиву значений, .forEach() обеспечивает чистый, естественный способ получить отличное закрытие для каждой итерации. То есть, предполагая, что у вас есть какой-то массив, содержащий значения (DOM-ссылки, объекты и т. Д.), И возникает проблема настройки обратных вызовов, специфичных для каждого элемента, вы можете сделать это:

var someArray = [ /* whatever */ ];
// ...
someArray.forEach(function(arrayElement) {
  // ... code code code for this one element
  someAsynchronousFunction(arrayElement, function() {
    arrayElement.doSomething();
  });
});

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

Если вы работаете в jQuery, функция $.each() дает вам аналогичная возможность.

Решение ES6: let

ECMAScript 6 (ES6), новейшая версия JavaScript, теперь начинает реализовываться во многих вечнозеленых браузерах и бэкэнд-системы. Существуют также транспиляторы, такие как Babel , которые преобразуют ES6 в ES5, чтобы использовать новые функции в старых системах.

ES6 вводит новые let и const ключевые слова, иначе, чем переменные, основанные на var. Например, в цикле с индексом, основанным на let, каждая итерация через цикл будет иметь новое значение i, где каждое значение ограничено внутри цикла, поэтому ваш код будет работать так, как вы ожидаете. Есть много ресурсов, но я бы рекомендовал двухступенчатый столбец как отличный источник информации.

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

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