Javascript for Loopは、ライブカウントでループした回数を表示するにはどうすればよいですか？

Question

Javascript for Loopは、ライブカウントでループした回数を表示するにはどうすればよいですか？

for (var i = 0; i < 10; i ++) { 
    [ DO FUNCTION HERE ] 
    document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i; 
} 

"Cycles：＃"を表示し、各機能をループしながら＃インクリメンタルに表示します。読み込み画面と同様です。 アイデア？

Answer 1

方法：

var out = document.getElementsByTagName("span")[3]; 
var speed = 1; 
var i = 0; 
function loop() { 
    out.innerHTML = "Cycles " + i; 
    // do something 
    if (++i < 10) { 
     setTimeout(loop, speed); 
    } 
} 
loop(); 

それは時間を見てあまりにも速く起こった場合は、単にspeedを高めます。 speedを100に設定すると、コードの実行に要する時間に応じて、1秒あたり約10回のカウンターインクリメントが表示されます。

Answer 2

関数では、スパンの内容を追加するのではなく、置き換えます。あなたのforループは実際にあなたがそれをやってみたい正確に何やっているが、javascriptはそうすぐにあなたがより速くまっすぐ最終サイクルに取得している実行されている

http://jsfiddle.net/9wKQw/

for (var i = 0; i < 10; i ++) { 
    document.getElementById("oput").innerHTML += "Cycles: " + i + "<br>"; 
} 

Answer 3

代わり+=演算子を使用しますあなたはそれが変化していることに気づくでしょう。あなたのvar iをコンソールに書こうとすると、私の言いたいことがわかります。それは毎回印刷されていますが、スクリプトの実行に時間がかからないため、ほとんど瞬時に表示されます。

EDIT：あなたの要求ごと

は、ここではこれが1秒に1回、あなたの表示を更新します

var i = 0; 
var interval = setInterval(
    function() { 
     /* add the rest of your method here */ 
     document.getElementsByTagName("span")[3].innerHTML = "Cycles: " + i; 
     i++; 
     if(i > 10) { /* number of repetitions */ 
      clearInterval(interval); 
     } 
    }, 
1000); /* seconds delayed */ 

Answer 4

...あなたはあなたのタイマーを実装することができるようにあなたがダウンしてアプリケーションを遅らせるだろうかです。

DEMO：http://jsfiddle.net/Lb3Uc/

var span = document.getElementsByTagName("span")[3]; 
var i = 0; 
(function looper() { 
    if(i++ < 10) { 
     span.innerHTML = "Cycles: " + i; 
     setTimeout(looper, 1000); 
    } 
})(); 

たびlooper機能は、それが再帰的に1000ms遅延の後に自分自身を呼び出すi < 10として、実行されます。

この種の非同期コードは、ページの再描画を可能にするために必要です。このようなものについて

Answer 5

AJAX関数と進捗状況の更新ビューを調整するには、関数呼び出しを人為的に遅くしないでください。 1つは、応答時間が短縮され、ユーザーが気に入らないことです。もう一つは、進歩は一つになるでしょう。

代わりに、AJAX関数は、AJAX呼び出しが適切か条件付きで完了したときに進捗状況を更新する関数を呼び出すようにしてください。

最後に、ドキュメント構造を変更する必要がある場合があります。この場合、進行要素の取得方法を変更する必要があります。代わりに、進行要素にIDを与え、getElementByIdを使用します。

var async_done = (function() { 
    var doneCount = 0; 
    return function() { 
     ++doneCount; 
     document.getElementById("Progress").innerHTML = "Cycles: " + doneCount; 
    }; 
})(); 

for (var i = 0; i < 10; i ++) { 
    async_function(async_done); 
}