0

以下の関数で「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
4

2 に答える 2

2

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

于 2012-07-09T08:36:24.160 に答える
1

これは、コールバックが実行されると、変数iが3であり、以下のように実行できるためです。

    setTimeout((function(i){
      return function() {
        document.body.innerHTML += 'L'+i+'<br/>';
        document.getElementById('L'+i).style.display = 'block';
      };
    })(i), 1000+i*50);
于 2012-07-09T08:36:04.267 に答える