javascript - FORループカウントアップ

Question

FOR loop私は次のコードを持っています。私は単純に 10 まで数えようとしjQueryています。i

for (i=0;i<=10;i++){
  setTimeout(function(){
      $(".test").html(i);
  },10000);
}

問題は、ループが実行され、終了するまで何も表示されず、単に数字の 10 になることです。

必要なものを達成する方法はありますか?

感謝

score 8 · Accepted Answer

クロージャー効果により、コードが期待どおりに機能しません。これは通常、作成直後に呼び出される別の無名関数を作成することで解決されます。

for (i=0;i <= 10;i++){
    (function(i) {
        setTimeout(function(){
            $(".test").html(i);
        }, i * 1000);
    })(i);
}

score 3 · Accepted Answer

var i = 0,
    T =setInterval(function(){
        i < 10 ?  $(".test").html(++i) : clearInterval(T);       
    },1000);

$(".test").html(i);

score 2 · Accepted Answer

setInterval()代わりに使用してみてください:

var i = 0;

var timer = setInterval(function() {
    $('.test').html(i);

    i++;

    if(i > 10) {
        clearInterval(timer);
    }
}, 10000);

現在のループはできるだけ速くループし、ループが呼び出されてから約 10 秒で 10 回のタイムアウトが発生するように設定します。渡された関数内のコードをsetInterval()10 秒ごとに呼び出し、実際にはループを遅らせます。

そのif()最後のステートメントはi > 10、変数をクリアすることによって間隔が参照された場合に発生する間隔を停止します。

私はあなたの JSFiddle hereを forkし、テスト目的で 10 秒ではなく 100 ミリ秒の待機時間を設定しました。

3 に答える 3