带进度条的精美标签页脚本问题：切换标签后进度条异常残留

嘿，我看到你遇到了标签页进度条切换后残留着色的问题——这大概率是因为你用的延迟动画没有被正确终止，当快速切换标签时，旧的动画任务还在后台运行，和新动画叠加就导致了残留区块～

问题根源分析 #

你当前的代码里，每次切换标签时会启动新的延迟（比如setTimeout）动画，但之前标签的动画任务并没有被清除。举个例子：当你从标签1切到标签3，标签1的进度条延迟动画可能还没走完，等你切回标签1时，旧的动画还在执行，就会和新触发的动画冲突，留下残留的着色区块。

具体解决方案 #

1. 保存延迟任务引用，切换时清除旧任务

在全局作用域保存之前的延迟ID，每次调用check函数时，先清除未完成的延迟任务，再启动新的动画：

// 全局保存延迟任务的ID
let progressDelayId = null;
let numberold = -1;

function check(number) {
    // 先清除上一个未完成的延迟动画
    if (progressDelayId) {
        clearTimeout(progressDelayId);
        progressDelayId = null;
    }

    // 你的原有代码逻辑
    const name = "year" + number;
    const nameold = "year" + numberold;
    const nametab = "tab" + number;
    const nametabold = "tab" + numberold;
    const circlename = "circle" + number;
    const circlenameold = "circle" + numberold;

    // 假设你原来的延迟动画是这样的，现在把ID存起来
    progressDelayId = setTimeout(() => {
        // 这里写你进度条着色的逻辑，比如：
        document.getElementById(circlename).style.backgroundColor = "#your-color";
        // 其他进度条样式修改...
    }, 300);

    // 更新旧标签编号
    numberold = number;
}

2. 切换时强制重置旧标签的进度条状态

在处理新标签之前，把旧标签的进度条样式完全重置为初始状态，确保没有残留：

function check(number) {
    // 重置旧标签的进度条样式（如果存在旧标签）
    if (numberold !== -1) {
        const oldCircle = document.getElementById("circle" + numberold);
        // 根据你的进度条实现，重置样式，比如：
        oldCircle.style.backgroundColor = "transparent";
        oldCircle.style.width = "0%";
        // 其他需要重置的样式属性...
    }

    // 你的原有代码逻辑...
    numberold = number;
}

3. 用requestAnimationFrame替代setTimeout（更可靠的动画控制）

如果你的进度条是连续的过渡动画（比如宽度从0到100%），用requestAnimationFrame会比setTimeout更流畅，也更容易控制终止：

let animationFrameId = null;
let numberold = -1;

// 封装进度条动画函数
function animateProgress(element, targetWidth) {
    let currentWidth = 0;
    // 清除之前的动画帧
    cancelAnimationFrame(animationFrameId);

    function step() {
        currentWidth += 5; // 每次动画步长，可调整
        element.style.width = `${currentWidth}%`;
        if (currentWidth < targetWidth) {
            animationFrameId = requestAnimationFrame(step);
        }
    }
    step();
}

function check(number) {
    // 清除旧动画
    cancelAnimationFrame(animationFrameId);

    // 重置旧标签进度条
    if (numberold !== -1) {
        const oldProgress = document.getElementById("circle" + numberold);
        oldProgress.style.width = "0%";
        oldProgress.style.backgroundColor = "transparent";
    }

    // 启动新标签的进度条动画
    const newProgress = document.getElementById("circle" + number);
    animateProgress(newProgress, 100);

    numberold = number;
}

核心思路总结 #

不管用哪种方法，核心都是确保每次切换标签时，终止上一个标签的所有未完成动画，并重置其进度条状态——这样就能彻底避免旧动画和新动画叠加导致的残留问题了。

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