如何用Vanilla JS实现可重置的循环1秒倒计时计时器？

问题根源 #

你的代码在倒计时结束（count <= 0）时调用了clearInterval(counter)终止定时器，并且return退出函数，因此只会执行单次倒计时，无法循环。

修改方案 #

不需要终止定时器，而是在倒计时归0时重置计数变量，让定时器持续运行即可。同时调整逻辑顺序，确保倒计时能完整显示到0秒后再重置回1秒。

修改后的代码 #

var count = 100; // 初始值对应1秒
var counter = setInterval(timer, 10); // 每10ms执行一次（对应百分之一秒）

function timer() {
    // 先更新当前倒计时显示，保留两位小数避免精度问题
    document.getElementById("timer").textContent = (count / 100).toFixed(2) + " secs";
    count--;
    
    // 当计数小于0时重置为初始值
    if (count < 0) {
        count = 100;
    }
}

代码说明 #

• 移除了clearInterval(counter)和return，保留定时器持续运行
• 先更新DOM显示再递减计数，确保能完整显示到0.00 secs
• 使用toFixed(2)格式化秒数，避免出现0.010000000000000009这类精度异常
• 当count < 0时重置为初始值100，实现循环倒计时逻辑

为什么之前的尝试无效 #

• 重新声明变量：在if内用var count = 100会因var的变量提升导致重复声明，若同时错误递归调用timer()，会触发无限递归耗尽浏览器资源，导致崩溃
• 直接调用timer()：同步调用函数会引发无限递归（函数内再次调用自身），同样会造成浏览器崩溃

内容的提问来源于stack exchange，提问作者Michael_V