SVGator JavaScript API定时器循环报错：如何实现动画后循环最后2秒？

错误原因分析 #

• 多余的函数调用括号：原代码中player.seekTo(2000)()是核心错误，seekTo是SVGator播放器的方法，调用后不会返回可执行的函数，额外的括号会尝试执行一个非函数值，直接触发TypeError。
• 重复创建定时器：在timerLoop内部再次调用setInterval(timerLoop, 2000)，会导致每次执行timerLoop都新建一个定时器，造成逻辑混乱，最终导致代码异常停止。

修正后的代码方案 #

方案1：使用固定延迟（适合已知精确时长的场景）

const element = document.getElementById('eDuWOrNCbmP1');
const player = element?.svgatorPlayer || {};

if (player.play) {
    // 先完整播放一次动画
    player.play();
    
    // 等待4秒（完整动画时长）后，开始循环最后2秒
    setTimeout(() => {
        setInterval(() => {
            // 定位到动画的2秒位置
            player.seekTo(2000);
            // 从当前位置播放到动画结束
            player.play();
        }, 2000);
    }, 4000);
}

方案2：监听动画完成事件（更可靠，适配实际播放时长）

通过监听播放器的finish事件，确保动画确实播放完成后再启动循环，避免固定延迟可能出现的偏差：

const element = document.getElementById('eDuWOrNCbmP1');
const player = element?.svgatorPlayer || {};

if (player.play) {
    // 先完整播放一次
    player.play();
    
    // 只监听一次动画完成事件
    player.addEventListener('finish', () => {
        // 每隔2秒循环播放最后2秒内容
        setInterval(() => {
            player.seekTo(2000);
            player.play();
        }, 2000);
    }, { once: true });
}

关键修正点说明 #

1. 移除seekTo调用后的多余括号，直接使用player.seekTo(2000)定位到指定时间点。
2. 将定时器的创建逻辑扁平化，避免在循环函数内重复创建定时器，确保只有一个循环定时器在运行。
3. 方案2使用finish事件替代固定延迟，让循环启动时机更准确，尤其适合网络加载或渲染延迟导致动画实际时长波动的场景。

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