setTimeout（）没有等待[重复]

Posted 2023-02-25

【中文标题】setTimeout（）没有等待[重复]

【英文标题】：setTimeout() is not waiting [duplicate]

【发布时间】：2013-02-16 18:04:24

【问题描述】：

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

【问题讨论】：

你的脚本是在自己的文件中还是在.php文件中？

Calling functions with setTimeout() 的副本

【参考方案1】：

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

改为执行一个匿名函数来调用您的函数：

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

【讨论】：

Mike：PS：如果你不需要向函数传递任何东西，你也可以使用setTimeout(countdown, t);。 ;)

谢谢，我也忽略了这个微妙之处。

【参考方案2】：

如果你想通过setTimeout 将参数传递给函数，试试这个：

setTimeout(countdown, 1000, element);

setTimeout 的语法如下：

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

【讨论】：

注意：根据Mozilla，像这样传递参数只适用于IE >= 10。

【参考方案3】：

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

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

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