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,...)