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
相关产品推荐
相关产品推荐

