的setTimeout()不等待(setTimeout() is not waiting)

2019-07-20 20:02发布

我试图做一个倒计时秒的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的是asynchroneous。 试试这个:

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

这将使在1000毫秒功能倒计时执行。



Answer 3:

如果你想一个参数传递给一个函数setTimeout ,试试这个:

setTimeout(countdown, 1000, element);

的setTimeout的语法如下:

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


文章来源: setTimeout() is not waiting