JavaScript如何正确循环实现多轮重复倒计时效果

需要实现交替倒计时共4次重复的逻辑：首次从5秒启动倒计时，倒计时结束后切换为10秒倒计时，以上交替流程总计执行4轮。
单独运行单段倒计时逻辑时可正常执行，但将逻辑放入while、do while、for等任意循环结构后，会出现约4秒的跳秒问题，也无法按要求完成指定次数的重复执行。
原有实现代码如下：

function startCountDown() {
    let reps = 1
    while (reps <= 4) {
        setInterval(studyCountDown, 1000);
        reps++

    }
}

function studyCountDown() {
    const minutes = Math.floor(studyTime / 60)
    let seconds = studyTime % 60

    if (seconds >= 0) {
        seconds = seconds < 10 ? '0' + seconds : seconds;
        countdownOutput.innerHTML = `${minutes}:${seconds}`
        studyTime--;
    }
    else {
        breakCountDown()
    }

}

代码存在两个致命逻辑错误：

• JavaScript的while等循环是同步执行的，setInterval属于异步API，循环会在几毫秒内直接跑完4次，一次性注册4个同时触发的定时器。这意味着每秒会并行执行4次studyCountDown，studyTime1秒内被递减4次，就是跳4秒问题的直接原因。
• 缺失状态流转逻辑：既没有在单次倒计时结束时清除当前定时器，也没有切换5秒/10秒的倒计时时长配置，更没有记录已完成的重复轮次，自然无法完成4次交替流程。
  此外原代码未对studyTime、countdownOutput变量做初始化定义，breakCountDown函数也没有实现阶段切换的对应逻辑。

不要用同步循环批量注册定时器，改为单次倒计时结束后再触发下一段倒计时的链式调用逻辑，全程只维护一个定时器，从根源避免多定时器并行的问题。完整可运行代码如下：

// 初始化DOM引用与全局状态，替换为你实际的显示元素选择器
const countdownOutput = document.getElementById('countdown');
let currentTimer = null; // 存储当前定时器ID，用于清除
const totalRounds = 4; // 总计需要重复的轮次
let currentRound = 0; // 已完成的轮次计数
let isStudyPhase = true; // 阶段标记：true为5秒阶段，false为10秒阶段
let studyTime = 5; // 当前倒计时剩余时长

function startCountDown() {
    // 重置所有初始状态
    currentRound = 0;
    isStudyPhase = true;
    studyTime = 5;
    if (currentTimer) clearInterval(currentTimer);
    // 启动第一段倒计时
    runSingleCountDown();
}

function runSingleCountDown() {
    currentTimer = setInterval(() => {
        const minutes = Math.floor(studyTime / 60);
        let seconds = studyTime % 60;

        if (seconds >= 0) {
            seconds = seconds < 10 ? '0' + seconds : seconds;
            countdownOutput.innerHTML = `${minutes}:${seconds}`;
            studyTime--;
        } else {
            // 当前段倒计时结束，清除当前定时器
            clearInterval(currentTimer);
            switchPhase();
        }
    }, 1000);
}

function switchPhase() {
    // 每完成一次10秒阶段，代表完成一轮完整交替
    if (!isStudyPhase) {
        currentRound++;
        // 达到4轮总次数，直接结束流程
        if (currentRound >= totalRounds) {
            countdownOutput.innerHTML = "倒计时全部结束";
            return;
        }
    }
    // 切换阶段，设置对应倒计时时长
    isStudyPhase = !isStudyPhase;
    studyTime = isStudyPhase ? 5 : 10;
    // 启动下一段倒计时
    runSingleCountDown();
}

// 调用启动函数即可运行
startCountDown();

• 全程仅维护一个定时器，每次启动新倒计时前都会清除已有定时器，完全避免多定时器并行导致的跳秒问题。
• 通过isStudyPhase标记区分当前倒计时阶段，每跑完一次「5秒+10秒」的完整流程才会计入一次完成轮次，刚好匹配4次重复的需求。
• 所有状态在启动时统一重置，多次调用启动函数也不会出现状态混乱。

内容的提问来源于stack exchange，提问作者Rebja A.