如何用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

var durationUpdater;

var song = new Howl({
    // song is still missing bunch of stuff here, but irrelevant for this issue

    onplay: function() {
        durationUpdater = setInterval(function(){
            UpdateT1();
            console.log(currentsong + ': song-progress updated');
        },500);
    },
    onend: function() {
        clearInterval(durationUpdater);
    }
});

Answer 2

这是一个bug，但对您的问题的解决办法并不粗暴：

在这里，将一个字符串赋值给b (toFixed()返回一个字符串)：

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

在这里，你试着把字符串除以60。

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

结果是undefined。