javascript - for循环内setInterval中计数器变量i的范围

Question

如何在下面的函数中将 'i' 设置为在 setInterval 内递增，而不是读取 'i' 的最终值？

    window.onload= function(){
        var res = ['a','b','c']
        for(i=0;i<res.length;i++){
            document.body.innerHTML += "<li id='L"+i+"' style='display:none;'>"+res[i]+"</li>";
            setTimeout(function(){ 
                document.body.innerHTML += 'L'+i+'<br/>';
                document.getElementById('L'+i).style.display = 'block'
            },1000+i*50);
        }
    }

输出：

L3
L3
L3

Answer 1

for 循环（或任何块）不像其他语言那样免费提供新的范围，您必须使用内联闭包或使用函数迭代，.forEach将内联闭包作为“副作用”：

window.onload= function(){
    ['a','b','c'].forEach( function(letter, index) {
        document.body.innerHTML += "<li id='L"+index+"' style='display:none;'>"+letter+"</li>";
        setTimeout(function(){ 
            document.body.innerHTML += 'L'+index+'<br/>';
            document.getElementById('L'+index).style.display = 'block';
        },1000+index*50);
    });
}

如果需要，请在此处使用 shim 以获得旧版浏览器支持：

https://developer.mozilla.org/en/JavaScript/Reference/Global_Objects/Array/forEach

Answer 2

这是因为当你的回调执行时，变量i是3，你可以这样做：

    setTimeout((function(i){
      return function() {
        document.body.innerHTML += 'L'+i+'<br/>';
        document.getElementById('L'+i).style.display = 'block';
      };
    })(i), 1000+i*50);