You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

JavaScript倒计时瞬间完成问题:如何实现10到0的1秒间隔倒计时?

修复JavaScript倒计时瞬间输出的问题

你的代码问题在于:for循环会瞬间完成所有迭代,所有setTimeout都被设置为1秒后执行,导致1秒后所有数字一次性输出。以下是两种修复方案:

方案一:调整延迟时间递增

利用let的块级作用域特性,为每个setTimeout设置递增的延迟时间,让每个数字的输出间隔1秒:

for (let i = 10; i >= 0; i--) {
    setTimeout(function() {
        console.log(i);
    }, (10 - i) * 1000);
}

原理:当i=10时,延迟0*1000=0毫秒(立刻输出10);i=9时延迟1*1000=1000毫秒(1秒后输出9);以此类推,直到i=0时延迟10秒输出,完美实现每间隔1秒输出一个数字的效果。

方案二:递归调用setTimeout

用递归的方式更直观地控制倒计时流程,避免循环带来的延迟同步问题:

let count = 10;
function countdown() {
    console.log(count);
    if (count > 0) {
        count--;
        setTimeout(countdown, 1000);
    }
}
countdown();

原理:第一次调用countdown直接输出10,之后每间隔1秒调用一次自身,每次调用前将count减1,直到count为0时停止,自然实现倒计时效果。

内容的提问来源于stack exchange,提问作者darkchampionz

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.29 05:39:57