setTimeout（）が待機していません

Question

私はJavascriptで秒のカウントダウンをしようとしています。ここで

は私のHTMLは

<div id="ban_container" class="error center">Please wait 
     <span id="ban_countdown" style="font-weight:bold"> 
     45</span> 
     seconds before trying again 
</div> 

そして、私のJSです：

<script type="text/javascript"> 
    var seconds = <?php echo $user->getBlockExpiryRemaining(); ?>; 

    function countdown(element) { 
     var el = document.getElementById(element); 

     if (seconds === 0) { 
      document.getElementById("ban_container").innerHTML = "done"; 
      return; 
     } 
     else { 
      el.innerHTML = seconds; 
      seconds--; 
      setTimeout(countdown(element), 1000); 
     } 
    } 

    countdown('ban_countdown'); 
</script> 

は、しかし、いくつかの理由で、それはタイムアウト時間を待っていないが、私はリフレッシュしたときにように代わりにすぐcountdownを実行しますすぐに「完了」と表示されるページ。 innerHTML += seconds + " ";を実行すると、45からカウントダウンされるため、実際に複数回実行されていることがわかります。なぜタイムアウトをバイパスしていますか？

Answer 1

setTimeout(countdown(element), 1000);は、その引数で関数を実行し、その結果をsetTimeoutに渡します。あなたはそれを望んでいません。の

setTimeout(countdown, 1000, element); 

構文：あなたはsetTimeoutで関数に引数を渡すしたい場合

setTimeout(function() { 
    countdown(el); // You used `el`, not `element`? 
}, 1000); 

Answer 2

これは、setTimeoutが非同期であるためです。試してください：

setTimeout(function(){ 
    countdown('ban_countdown'); //or elemement 
}, 1000); 

これは1000ミリ秒後に機能のカウントダウンを実行します。

Answer 3

、これを試してみてください。

代わりに、あなたの関数を呼び出す匿名関数を実行しますsetTimeoutは次のとおりです。

setTimeout(function,milliseconds,param1,param2,...)