JavaScript倒计时结束后如何实现自动重复？

方案一：修改原setInterval实现 #

直接在计时器归零时重置timer变量，就能实现循环倒计时，同时避免负数问题：

function startTimer(duration, display) {
    let timer = duration;
    // 保存intervalID，方便后续手动停止计时器（可选）
    const intervalId = setInterval(function () {
        const minutes = parseInt(timer / 60, 10);
        const seconds = parseInt(timer % 60, 10);

        // 格式化两位数字
        const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
        const formattedSeconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = `${formattedMinutes}:${formattedSeconds}`;

        if (--timer < 0) {
            // 重置为初始时长，开启下一轮倒计时
            timer = duration;
        }
    }, 1000);

    return intervalId;
}

window.onload = function () {
    const fiveMinutes = 60 * 5;
    const display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

方案二：用递归setTimeout实现（更可靠） #

setInterval可能因为主线程阻塞导致回调堆积，用递归setTimeout能避免这个问题，时间精度更高：

function startTimer(duration, display) {
    let timer = duration;

    function updateTimer() {
        const minutes = parseInt(timer / 60, 10);
        const seconds = parseInt(timer % 60, 10);

        const formattedMinutes = minutes < 10 ? "0" + minutes : minutes;
        const formattedSeconds = seconds < 10 ? "0" + seconds : seconds;

        display.textContent = `${formattedMinutes}:${formattedSeconds}`;

        if (--timer < 0) {
            timer = duration;
        }

        // 每次更新完成后再调度下一次
        setTimeout(updateTimer, 1000);
    }

    // 启动第一次计时
    updateTimer();
}

window.onload = function () {
    const fiveMinutes = 60 * 5;
    const display = document.querySelector('#time');
    startTimer(fiveMinutes, display);
};

原代码问题解析 #

你遇到的负数问题，是因为当timer减到0时，执行--timer会变成-1，下一次回调会基于-1计算分钟和秒，导致出现00:0-1这类错误。通过在timer < 0时将其重置为初始时长，就能让倒计时循环，同时避免负数。

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