开发者

Workaround for let keyword?

How can I get this

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

for (var i = 0; i < codes.length; ++i)
{
    setTime开发者_如何学编程out(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] );
    });
}


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.


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


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

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

setTimeout(timeoutFunc, 100);


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


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

0

上一篇:

下一篇:

精彩评论

暂无评论...
验证码 换一张
取 消

最新问答

问答排行榜