Question

How do I set ‘i’ in the function below to be incremental inside the setInterval rather than reading the final value of ‘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);
        }
    }

outputs:

L3
L3
L3

Answer 1

For loops (or any blocks for that matter) don’t provide a new scope for free like in other languages, you must either use an inline closure or use functional iteration with .forEach where you get the inline closure as a “side effect”:

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

If required, use the shim here for older browser support:

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