我正在尝试创建一个函数来计算Spotify中歌曲的时间进度,但我仍然坚持使用clearInterval函数。问题是我尝试重置后,计时器只是继续加速。我正在使用Reactjs
第一次运行intervalToTick是1.6秒,但是如果我再次运行该功能,它的速度会快一倍并且每次重置都会变得更快(第一次运行)
我的解决方案是因为我使用mobX是在商店中添加myTimer
作为@observable,然后继续下面的答案
const ticker = function() {
if (store.timer < 100) {
store.addToTimer() //mobX store action to add 1+ to the store.timer
}
};
function progress() {
store.timer = 0
let time = Moment()
let songEnd = Moment().add(1, "minutes")
const durationToFinnish = Moment.duration(songEnd.diff(time));
const intervalToTick = 100000 / durationToFinnish.asMilliseconds()
//Dumb to have it 2 times but cant figure of another way
var myTimer = window.setInterval(ticker, intervalToTick * 1000);
clearInterval(myTimer);
myTimer = window.setInterval(ticker, intervalToTick * 1000);
}
<div className={classes.progressBar} id="progress">
<div className={classes.innerProgressBar}>
<span onClick={progress}>{store.timer}%</span><br></br>
</div>
</div>
您应该使定时器变量具有更高的范围,以便可以从progress
和ticker
访问它,如果已经运行了一个间隔,则需要清除间隔,以便不能同时运行多个间隔:
var myTimer = null; // Declared here so it can be used in both functions
const ticker = function () {
if(store.timer < 100){
store.addToTimer() //mobX store action to add 1+ to the store.timer
}
};
function progress() {
store.timer = 0
let time = Moment()
let songEnd = Moment().add(1, "minutes")
const durationToFinnish = Moment.duration(songEnd.diff(time));
const intervalToTick = 100000 / durationToFinnish.asMilliseconds()
// Check to see if there is already a timer running
if(myTimer){
clearInterval(myTimer); // Stop the interval
}
myTimer = setInterval(ticker, intervalToTick * 1000);
}
<div className={classes.progressBar} id="progress">
<div className={classes.innerProgressBar}>
<span onClick={progress}>{store.timer}%</span><br></br>
</div>
</div>