Обходной путь для ключевого слова let?

Question

Как я могу получить это

var i = 0;
var codes = [1, 2, 3];

for (var i = 0; i < codes.length; ++i)
{
    setTimeout(function(){alert(codes[i]);},100);
}

К alert 1, 2 и 3 без использования ключевого слова let?

или связать событие с элементом ( пример ):

var i = 0;
var codes = [1, 2, 3];

for (var i = 0; i < codes.length; ++i)
{
    $("div").eq(i).click(function(){
        alert( codes[i] );
    });
}

Answer 1

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

var i = 0;
var codes = [1, 2, 3];

for (var i = 0; i < codes.length; ++i)
{
    (function( index ) {
        setTimeout(function(){alert(codes[index]);},100);
    })(i);
}

Вот пример.

Answer 2

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

var i = 0;
var codes = [1, 2, 3];
function callbackGenerator(i) { 
   return function(){alert(codes[i]);}
}

for (var i = 0; i < codes.length; ++i)
{
    setTimeout(callbackGenerator(i), 100);
}

Больше информации и хороших примеров здесь: https://developer.mozilla.org/en/JavaScript/Guide/Closures

Answer 3

Использовать самовыполняющуюся функцию :

for (var i = 0; i < codes.length; ++i) (function(bound_i) {
    setTimeout(function(){alert(codes[bound_i]);},100);
})(i);

При желании можно использовать оператор var для более подробного кода:

for (var i = 0; i < codes.length; ++i) (function() {
    var bound_i = i;
    setTimeout(function(){alert(codes[bound_i]);},100);
})();

Или используйте взамен именованную функцию, если хотите:

function foo(i) {
    setTimeout(function(){alert(codes[i]);},100);
}

for (var i = 0; i < codes.length; ++i) {
    foo(i);
}

Любой пример формирует замыкание, которое вводит новую переменную scope. В качестве альтернативы, ES5 имеет Function.bind , который можно использовать в анонимной функции, но пока он поддерживается не во всех браузерах. (Я думаю о IE.)

Answer 4

Это должно сделать это.

var codes = [1, 2, 3];

for (var i = 0; i < codes.length; ++i)
    setTimeout(function(code){return function(){
        alert(code);
    }}(codes[i]), 100);

Answer 5

var i = 0;
var codes = [1, 2, 3];

var timeoutFunc = function() {
    alert(codes[i++]);
    if (i < codes.length) {
        setTimeout(timeoutFunc, 100);
    }
};

setTimeout(timeoutFunc, 100);