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

score 4 · Accepted Answer · answered Mar 08 '11 at 00:20

4

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.

answered Mar 08 '11 at 00:20

mVChr

49,587
11
107
104

That would cause all 3 to go off simultaneously, is that the desired functionality? – Orbling Mar 08 '11 at 00:22
If not, he can change the delay on the setTimeout to `100*(index+1)` – mVChr Mar 08 '11 at 00:23

score 3 · Answer 2 · answered Mar 08 '11 at 00:23

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

score 1 · Answer 3 · answered Mar 08 '11 at 00:13

1

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

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

setTimeout(timeoutFunc, 100);

answered Mar 08 '11 at 00:13

Orbling

20,413
3
53
64

score 1 · Answer 4 · answered Mar 08 '11 at 00:24

1

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

answered Mar 08 '11 at 00:24

jairajs89

4,495
3
18
14

score 1 · Answer 5 · edited May 23 '17 at 11:47

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.)

Workaround for let keyword?

5 Answers5