Hi everyone
Let start by apologizing to your eyes, I plan on redoing a lot of this code more organized and better when i’m done.
I seem to be having an issue when the play/pause button is clicked repeatedly or a couple times quickly, it causes the countdown timer to count in chunks of seconds instead of every 1 sec like it should.
I’m confident the problem is some sort of issue with the “countdownStartStop()” function of the “Timer” component. More specifically I believe it is some sort of issue with the “runningClock” setInterval or that same interval not being cleared properly some times.
Am I missing a condition where “clearInterval(this.runningClock)” needs to trigger?
Do I need to setTimeout onthe actual clicks of the play/pause button to avoid triggering the setInterval again before the 1 sec is up?
quick look inside the component:
playPauseToggle(){
let display = document.getElementById("status-container");
if(this.state.playPause === "fa-solid fa-play"){
display.style.setProperty("font-size","1rem");
this.setState({
playPause: "fa-solid fa-pause",
startStopBtn: "pause",
running: true,
timerStatus: quotes[ Math.floor(Math.random()*quotes.length)]
})
this.countdownStartStop();
}else {
this.setState({
playPause: "fa-solid fa-play",
startStopBtn: "play",
running: false,
timerStatus: "Click Play to Begin"
})
display.style.setProperty("font-size","2rem");
this.countdownStartStop();
}
}
countdownStartStop() {
if(this.state.breakTime === true){
let breakMin = this.state.breakLength.toString();
if(breakMin.length <= 1){
this.setState({
countdown: "0"+breakMin+":"+"00"
})
}else{
this.setState({
countdown: breakMin+":"+"00"
})
}
}
let minutes = this.state.countdown.slice(0,2);
let seconds = this.state.countdown.slice(3,5);
let workTime = this.state.sessionLength.toString();
workTime = workTime.length <= 1 ? "0"+workTime+":"+"00" : workTime+":"+"00";
this.runningClock = setInterval(()=>{
if(this.state.running === false ){
clearInterval(this.runningClock);
return;
}
if(this.state.running === true && this.state.countdown === "00:00"){
let sound = document.getElementById('beep');
sound.play();
if(this.state.breakTime === true){
this.setState({
breakTime: false,
countdown: workTime,
timerStatus: quotes[ Math.floor(Math.random()*quotes.length)]
})
let display = document.getElementById("status-container");
display.style.setProperty("font-size","1rem");
clearInterval(this.runningClock);
window.alert("Time To Focus");
this.countdownStartStop();
}else{
clearInterval(this.runningClock);
this.checkForBreak();
}
return;
}
if(seconds === "00"){
seconds = "59";
minutes = (parseInt(minutes)-1).toString();
if(minutes.length === 1){minutes = "0"+minutes}
this.setState({
countdown: minutes+":"+seconds
})
}else{
seconds = (parseInt(seconds)-1).toString();
if(minutes.length === 1){minutes = "0"+minutes}
if(seconds.length === 1){seconds = "0"+seconds}
this.setState({
countdown: minutes+":"+seconds
})
}
},1000)
}
checkForBreak(){
if (window.confirm(
` Times Up!!!
Click OKAY to start your break
-OR-
Click Cancel for a few more minutes of work`)) {
let display = document.getElementById("status-container");
this.setState({
breakTime: true,
timerStatus: "RELAX"
})
display.style.setProperty("font-size","2rem");
this.countdownStartStop();
}else{
this.setState({
countdown: "02:00"
})
this.countdownStartStop();
}
}
or link to the code pen