5 
while (counterInc < counter) {
  window.setTimeout(function () {
    $('#results').text(counterInc);
    }, 3000);
  counterInc++;
}

このコードは、while ループが実行されて最終結果が返される代わりに、3000 ミリ秒ごとに ID 結果でタグをインクリメントする必要があります。たとえば、テキストを 1、2、3、4、5、..n に変更する代わりに、テキストを n に変更しています。最終結果だけでなく、各インクリメントで 1000 ミリ秒ごとにテキスト フィールドを更新するループを作成するにはどうすればよいでしょうか。

4

4 に答える 4

7

これを試して

var counterInc = 0;
var counterMax = 10;

var timeoutId = window.setInterval(function() {
    $('#results').text(counterInc++);
    if (counterInc >= counterMax) {
        window.clearInterval(timeoutId);
    }
}, 500);​

http://jsfiddle.net/GufCs/4/

何が起こっていたかというと、タイムアウトによって 3 秒ごとにセルが更新されましたが、ループは 3 秒で途方もない量の数値を実行できるため、setTimeout の関数が実行されるまでには時間がかかります。

これにより、500 ミリ秒ごとに関数がトリガーされ (目的に応じて 3000 ミリ秒に変更されます)、その場合にのみ counterInc がインクリメントされます。counterMax に達すると Interval をクリアするように追加します。

于 2012-08-21T20:17:48.243 に答える
2

問題は、setTimeout() が「独立したスレッド」として機能することです。設定すると、指定された時間後に 1 回実行されます。その間、「メインスレッド」は実行され続けます。そのため、その間にカウンターが増加します。

于 2012-08-21T20:19:02.380 に答える
1

問題を理解するには、クロージャとは何かを理解する必要があります。ここでは、ループスコープの最後で計算された値ではなく、特定の値を毎回渡す必要があります。

したがって、setTimoutを呼び出すときではなく、宣言したときに値を計算します。次のように実行できます。http: //jsfiddle.net/lechevalierd3on/jhYm3/

var counter = 10;
var counterInc= 0;

while (counterInc < counter) {
  window.setTimeout(function () {
      var inc = counterInc;
      return function(){
          $('#results').text(inc);
      }
  }(counterInc), 1000 * counterInc);   

  counterInc++;
}​
于 2012-08-21T20:38:45.517 に答える
-2 
while (counterInc < counter) {
  window.setTimeout(function () {
    $('#results').text(counterInc);
    }, 3000 * counterInc++);
}
于 2012-08-21T20:19:00.337 に答える