如何清除forEach循环中创建的所有setTimeout定时器？

我正在编写JavaScript代码，实现浏览器中与歌曲音符同步的重复动画。现有代码如下：

//Determine the timing for each note played
var expTimes = [0, 215, 323, 645, 860, 968, 1290...]
var strumTimeout;

//Loop through the array and strum at each listed timeout through the duration of the audio
function StrumPattern(strumArray){
    //Toggles the CSS transforms to make the strum animation happen 
    function strum(){
        if (strumHand.style.transform == "rotate(50deg)"){
            strumHand.style.transform = "rotate(0deg)";
        }else{
            strumHand.style.transform = "rotate(50deg)";
        }
    }  
   
    //Sets the timeout for each strum animation to play in a sequence
    strumArray.forEach(delay => { 
            strumTimeout = setTimeout(() => {
            strum();
            console.log("strum");
        }, delay);
    });
}

当前遇到的问题：用户关闭音乐时需要清除所有关联定时器，但现有方法要么无法终止循环，要么会清除页面所有定时器。比如尝试过以下函数，但它会清除全局所有setTimeout，且每次调用输出的日志数量递增：

//Clears
function clearStrum(){
    var id = strumTimeout;

    while (id--) {
        console.log('removing timeout');
        window.clearTimeout(id); // will do nothing if no timeout with id is present
    }
}

另外用常规for循环加break要么无效，要么报错“Jump target cannot cross function boundary”。需要找到标记并清除forEach中创建的定时器的方法，或者更优的可变延迟序列动画实现方案。

方案一：保存目标定时器ID，精准清除 #

核心思路是将每个setTimeout返回的ID存入数组，清除时遍历数组逐个清除，同时避免重复执行多个动画循环。

修改后的代码：

// 存储所有strum相关的定时器ID
let strumTimeoutIds = [];
var expTimes = [0, 215, 323, 645, 860, 968, 1290...];

function StrumPattern(strumArray){
    // 启动新动画前先清除旧的，避免多循环冲突
    clearStrum();

    function strum(){
        if (strumHand.style.transform === "rotate(50deg)"){
            strumHand.style.transform = "rotate(0deg)";
        }else{
            strumHand.style.transform = "rotate(50deg)";
        }
    }  

    strumArray.forEach(delay => { 
        const timeoutId = setTimeout(() => {
            strum();
            console.log("strum");
            // 执行后移除已完成的定时器ID（可选，优化数组长度）
            const index = strumTimeoutIds.indexOf(timeoutId);
            if (index !== -1) strumTimeoutIds.splice(index, 1);
        }, delay);
        strumTimeoutIds.push(timeoutId);
    });
}

function clearStrum(){
    // 遍历清除所有目标定时器
    strumTimeoutIds.forEach(id => window.clearTimeout(id));
    // 清空数组，避免重复清除
    strumTimeoutIds = [];
    console.log('已清除所有strum定时器');
}

此方案的优点：

• 仅清除当前动画相关的定时器，不影响页面其他定时器
• 每次启动新动画前自动清除旧定时器，避免多循环叠加导致的卡顿

方案二：基于时间戳的动画控制（更优方案） #

用requestAnimationFrame替代setTimeout，通过时间戳判断触发时机，这种方式更精准，启停控制更简单，也不会产生多个定时器。

示例代码：

let animationId = null;
let startTime = 0;
var expTimes = [0, 215, 323, 645, 860, 968, 1290...];
// 记录已触发的时间索引，避免重复执行
let currentIndex = 0;

function startStrumAnimation(){
    // 停止旧动画再启动新的
    stopStrumAnimation();
    startTime = performance.now();
    currentIndex = 0;
    animationId = requestAnimationFrame(animateStrum);
}

function animateStrum(currentTime){
    const elapsed = currentTime - startTime;
    // 检查是否有到达触发时间的音符
    while (currentIndex < expTimes.length && elapsed >= expTimes[currentIndex]){
        strum();
        console.log("strum");
        currentIndex++;
    }
    // 还有未触发的音符则继续循环
    if (currentIndex < expTimes.length){
        animationId = requestAnimationFrame(animateStrum);
    }
}

function strum(){
    if (strumHand.style.transform === "rotate(50deg)"){
        strumHand.style.transform = "rotate(0deg)";
    }else{
        strumHand.style.transform = "rotate(50deg)";
    }
}

function stopStrumAnimation(){
    if (animationId !== null){
        cancelAnimationFrame(animationId);
        animationId = null;
        console.log('已停止strum动画');
    }
}

此方案的优势：

• 动画与浏览器刷新频率同步，时间精度更高，避免setTimeout的延迟累积问题
• 仅需一个动画帧循环，内存占用更低
• 启停控制极简，调用stopStrumAnimation即可终止整个序列

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