如何避免视频进度追踪函数重复触发事件？

核心思路是记录已经触发过的进度节点，只在首次达到对应百分比时执行逻辑，避免重复触发。

修改后的代码： #

// 用Set存储已触发的进度节点，防止重复执行
const triggeredProgresses = new Set();

function getPercentage(a, b) {
    return ((a/b)*100);
}

setInterval(() => {
    const progress = Number(getPercentage(currentTime, durationTotal).toFixed(0));
  
    // 仅当进度未触发过时执行逻辑
    if (!triggeredProgresses.has(progress)) {
        switch(progress) {
            case 10:
                console.log('test 10');
                triggeredProgresses.add(10);
                break;
            case 25:
                console.log('test 25');
                triggeredProgresses.add(25);
                break;
        }
    }
}, 1000);

额外优化建议： #

• 如果视频支持拖拽进度条，需要监听视频的seeked事件，根据新的进度重置triggeredProgresses。比如用户拖拽到30%，10%、25%的逻辑就无需再触发；如果拖拽回5%，则需要重新允许10%、25%的触发。示例逻辑：

videoElement.addEventListener('seeked', () => {
    const currentProgress = Number(getPercentage(currentTime, durationTotal).toFixed(0));
    // 清空已触发的节点，或者保留大于当前进度的节点
    triggeredProgresses.clear();
    // 可选：若需保留已过的进度，遍历Set删除小于当前进度的项
    // for (const p of triggeredProgresses) {
    //     if (p < currentProgress) triggeredProgresses.delete(p);
    // }
});

• 也可以用普通对象存储触发状态，比如const triggered = {10: false, 25: false}，判断逻辑改为!triggered[progress]，执行后设置triggered[progress] = true，效果和Set一致。

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