如何不使用setInterval实现稳定的10分钟简易倒计时器

问题原因 #

你碰到的提前停止问题本质不是setInterval不可靠，是你的代码存在2个逻辑漏洞：

1. 执行顺序错误：你先把当前秒数渲染到页面，再执行秒数减1，最后才给个位数的秒数补前导零，补零后sec会变成字符串类型，后续的数值判断逻辑会失效，永远触发不了结束条件
2. 没有做定时器去重：多次点击开始按钮会生成多个并行的setInterval，导致倒计时速度异常，也会出现提前停止的情况

更可靠的实现方案 #

推荐用时间戳差值计算的方案实现倒计时，完全避免逐秒加减的累计误差，就算页面卡顿恢复后也能自动校准时间，比单纯依赖setInterval的逐次加减准很多。
修改后的JS代码如下：

const value = document.querySelector("#time");
const startBtn = document.querySelector("#btn-start")
const resetBtn = document.querySelector("#btn-reset");
// 存储定时器ID，避免重复创建
let timer = null;
// 倒计时总时长，单位秒，这里测试用63秒即1分3秒，正式用改成600就是10分钟
const TOTAL_SECONDS = 63;

startBtn.addEventListener('click', function(){
    // 避免重复点击生成多个定时器
    if(timer) return;
    // 计算结束时间戳
    const endTime = Date.now() + TOTAL_SECONDS * 1000;
    // 先渲染一次初始值
    updateTime(TOTAL_SECONDS);
    
    timer = setInterval(function(){
        // 计算当前剩余秒数
        const leftSeconds = Math.max(0, Math.round((endTime - Date.now())/1000));
        updateTime(leftSeconds);
        // 时间到结束
        if(leftSeconds <= 0){
            alert("DONE!");
            clearInterval(timer);
            timer = null;
            location.reload();
        }
    }, 1000);
});

resetBtn.addEventListener('click', function(){
    if(timer){
        clearInterval(timer);
        timer = null;
    }
    location.reload();
})

// 格式化时间并渲染的公共方法
function updateTime(leftSeconds){
    const minute = Math.floor(leftSeconds / 60);
    const sec = leftSeconds % 60;
    value.innerHTML = `${minute}:${sec.toString().padStart(2, '0')}`;
}

如果要改成正式的10分钟倒计时，只需要把TOTAL_SECONDS的值改成600即可，不用修改其他逻辑，你的HTML和CSS代码无需调整，可以直接复用。

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