印刷するjavascriptのsetTimeout

Question

私はJavaScriptの学習を始めました。単純なカウントダウンタイマーを試してみることを考えましたが、わかりません。

function countdown() { 
 
    var count1 = 10; 
 
    while (count1 >= 0) { 
 
    setTimeout(function() { 
 
     document.getElementById("main").innerHTML = count1; 
 
    }, 1000); 
 
    count1--; 
 
    } 
 
}

<p id="main" onload="countdown()"></p>

ページだけを停止する/ハング。何が問題なの？

Answer 1

タイマーにsetIntervalを使用し、カウントダウンが0になるとクリアします。すぐに呼び出される匿名関数を使用するか、定義時にすぐに名前付き関数を実行してください。あなたの関数は他には実行されないので、あなたのためのタイマーはありません。それはsetIntervalによって呼び出される関数内で起こるはずregularyと呼ばれ、（カウンタをdecreading）カウントダウンしますので

function countdown() { 
 
    var count1 = 10; 
 
    var myTimer = setInterval(function() { 
 
    document.getElementById("main").innerHTML = count1; 
 
    count1--; 
 
    if (count1 == 0) { 
 
     clearInterval(myTimer); 
 
    } 
 
    }, 1000); 
 
} 
 
countdown();

<div id="main"></div>

Answer 2

あなたは、代わりにsetIntervalを使用する必要があります。ループを省略して、カウンタが0になったときにclearIntervalを呼び出すことができます。

Answer 3

setTimeoutはこの関数を1回だけ実行します。 setIntervalを使用するとここで手助けできます。

もう1つ注目すべき点は、変数のスコープについてです。 setTimeOutが1秒間待機している間に、whileループは実行し続け、count1の値を変更します。

count1の値は常に-1になります。 Immediately Invoked Function Expression（IIFE）を使用することが必要です。

function countdown() 
{ 
    var count1 = 10; 
    while(count1 >= 0) { 
     var myTimer = setInterval((function() { 
     console.log(count1); 
     }(count1)), 1000); 
     count1 = count1 - 1; 
    } 
} 
countdown() 

Jsfiddle