javascript - 如何结束用于调用使用 Howler.js 更新时间的函数的间隔

Question

我创建了一个函数UpdateTime(x)，它更新获取歌曲的当前时间和总时间并写入div内。

我在 onload (Howler.js) 上调用此函数，因此当歌曲播放时它会写入 0:0/song:time加载并在 onplay (Howler.js) 上，每 50 毫秒间隔一次，因此它会在我开始播放歌曲时自动更新时间。

我的问题是这会导致无限循环并影响性能。

我的问题是:当歌曲停止播放时如何结束无限循环？

如果你们中的任何人有更优雅的方法来使用 Howler.js 更新时间，我也将不胜感激。

var songname = new Howl({
    src: ['mp3/songname.mp3'],
    onload: function() {
        UpdateTime(songname);
    },
    onplay: function() {
        setInterval(function(){
            UpdateTime(songname);
        },50);
    }/*,
    onend: function() {
        maybe end the interval here?...
    }*/
});

function UpdateTime(x){
    let a = (x.seek()).toFixed();
    let a2 = Math.floor(a / 60);
    let a1 = a - a2 * 60;
    let b = (x.duration()).toFixed();
    let b2 = Math.floor(b / 60);
    let b1 = b - b2 * 60;
    document.getElementById("time").innerHTML=a2+":"+a1+" / "+b2+":"+b1;
}

Answer 1

这是一个错误，但不一定能解决您的问题:

这里将一个字符串分配给 b(toFixed() 返回一个字符串):

let b = (x.duration()).toFixed();

在这里，您尝试将字符串除以 60。

let b2 = Math.floor(b / 60);

结果是未定义。