setTimeout() 不等待

IT技术 javascript timeout settimeout
2021-02-07 21:33:36

我正在尝试使用 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 开始倒计时。为什么会绕过超时？

3个回答

setTimeout(countdown(element), 1000);使用该参数执行您的函数并将结果传递到setTimeout. 你不想那样。

相反，执行一个匿名函数来调用您的函数：

setTimeout(function() {
    countdown(el);  // You used `el`, not `element`?
}, 1000);
Mike：PS：setTimeout(countdown, t);如果您不需要向函数传递任何内容，您也可以这样做。;)
2021-03-15 21:33:36
谢谢，我也忽略了这个微妙之处。
2021-03-23 21:33:36

如果您想将参数传递给函数 by setTimeout，请尝试以下操作：

setTimeout(countdown, 1000, element);

setTimeout 的语法如下：

setTimeout(function,milliseconds,param1,param2,...)
注意：根据Mozilla 的说法，像这样传递参数仅适用于 IE >= 10。
2021-04-05 21:33:36

这是因为 setTimeout 是异步的。试试这个：

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

这将使函数倒计时在 1000 毫秒后执行。

其它你可能感兴趣的问题
上一篇检查数组中是否存在数组？ 下一篇合并两个具有交替值的数组