I have an onClick method attached to a button called “start_stop”, which calls handleTimer. If you click start_stop when handleTimer is running, it gets paused and only resumes when you click it back. When handleTimer ends, breakValueBegins. This works as intended. However, when I press start_stop when breakValueBegins is running, I can´t get it to start again. How could I do it?
I´m pasting both methods in their entirety, because I think that matters:
breakValueBegins() {
clearInterval(this.Interval);
let breakBegins=document.getElementById("timer-label");
breakBegins.textContent="Good job! You get a break!";
let breakBegan=this.state.breakBegan;
let isPaused=this.state.isPaused;
this.newInterval = setInterval(() => {
let timer = this.state.timer;
console.log(this.state.timer)
if (timer > 0 && breakBegan && !isPaused) {
this.setState({
timer: this.state.timer - 1,
isPaused: false
})
}
else if(timer===0){
clearInterval(this.newInterval);
this.setState((state) => ({
timer: this.state.session *60,
breakValue: this.state.breakSession * 60,
isPaused: true
}));
breakBegins.textContent="Session";
this.handleTimer()
}
}, 100)
}
handleTimer() {
let breakBegan= this.state.breakBegan;
let isPaused = this.state.isPaused;
clearInterval(this.Interval);
this.Interval = setInterval(() => {
let timer = this.state.timer;
console.log(timer);
if (timer > 0 && !breakBegan) {
this.setState({
timer: this.state.timer - 1,
isPaused: false
})
}
if (!isPaused) {
clearInterval(this.Interval);
clearInterval(this.newInterval);
this.setState((state) => ({
isPaused: true,
intervalBegan: true
}))
}
if (timer === 0) {
clearInterval(this.Interval);
this.setState((state) => ({
timer: this.state.breakSession * 60, isPaused: false, breakBegan: true}));
this.breakValueBegins();
}
else{
clearInterval(this.setInterval)
}
}, 100)
}