Workaround for let keyword?

Question

How can I get this

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

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

To alert 1 , 2 and 3 without using let keyword?

or bind an event on an element ( example ):

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

Use a self-executing anonymous function and pass in i as an argument for variable closure.

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);
}

Here's an example.

Answer 2

You need to make use of a closure. I typically create a "generator" function that returns a function which is defined in the desired context:

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);
}

More info and good examples here: https://developer.mozilla.org/en/JavaScript/Guide/Closures

Answer 3

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

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

setTimeout(timeoutFunc, 100);

Answer 4

This should do it.

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

Use a self-executing function :

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

Optionally using a var statement for more verbose code:

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

Or use a named function instead if you want to:

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

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

Either example forms a closure, which introduces new variable scope. Alternatively, ES5 has Function.bind that could be used on the anonymous function, but it is not universally supported in all browsers yet. (I'm thinking of IE.)