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(function() { 
    countdown(el); // You used `el`, not `element`? 
}, 1000); 

Answer 2

這是因爲setTimeout是異步的。試試這個：

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

這將使函數countdown在1000毫秒後執行。

Answer 3

如果您想通過setTimeout將參數傳遞給函數，試試這個：

setTimeout(countdown, 1000, element); 

的語法setTimeout如下：

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