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

Question

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

我在onload（Howler.js）上调用了这个函数，所以它在加载歌曲时和在[=上写入0:0/song:time 16=] (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() returns一个字符串）：

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

在这里你尝试将一个字符串除以 60。

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

结果是undefined。

Answer 2

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);
    }
});

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

How to end interval used to call function which updates time with Howler.js

javascript

howler.js