1秒後に数字を1つずつ表示したい

Question

1秒後に数字を1つずつ表示したいが、下の数字は一緒に数字を表示する。

function showVal(){ 
    for(i=0; i<5; i++) 
    { 
     var showingVal= document.write("the number is "+i); 
     document.write("<br />");  
    } 
} 
setInterval('showVal()',1000); 

Answer 1

をクリアする代わりに、グローバル変数を使用して、関数内でループを使用して、関数内でそれを使用してチェックしません。

function showVal(n) { 
    if(!n) 
    n = 0; 
    var showingVal = document.write("the number is " + n); 
    document.write("<br />");  

    if(n < 4) { 
    setTimeout(function() { showVal(n + 1); }, 1000); 
    } 
} 

setTimeout(showVal, 1000); 

デモ：あなたは5つの数字を印刷した後、あなたのダニハンドラが呼び出されませんので、http://jsbin.com/avunif

それはsetIntervalよりはましです。効率。グローバル変数はありません。 :-)

代わりにclearIntervalすることができます。

Answer 2

は数が上限に達した場合、それは代わりにsetTimeoutを使用することをお勧めしますあなたの間隔

Answer 3

間隔を置いてdocument.writeを使用することはできません。これは、完了後に文書に書き込むので、代わりに文書がテキストに置き換えられます。

また、関数内のコードは一度に1つの数値を出力しません。すべての数値を一度に出力します。関数の外にカウンターが必要なので、それがどこにあるのかを追跡することができます。

clearIntervalを使用すると、すべての数値が出力されたら間隔を停止できます。

ページ内に既に存在する要素の内部にテキストを配置します。ページの要素の下にコードを配置して、コードの開始時に要素が作成されるようにします。

<div id="SomeElement"></div> 

<script type="text/javascript"> 

var handle, counter = 0, text = ''; 

function showVal(){ 
    if (counter < 5) { 
    text += "the number is " + counter + "<br />";  
    document.getElementById("SomeElement").innerHTML = text; 
    counter++; 
    } else { 
    window.clearInterval(handle); 
    } 
} 

handle = window.setInterval(showVal, 1000); 

</script> 

デモ：http://jsfiddle.net/Guffa/CY5DV/

（。それは変数とグローバルスコープを汚染しないように、これは閉鎖中で行うことができますが、それは、この問題の主要な問題のために重要ではありません）