I am working my way through the 25+5 timer but having trouble getting the setInterval method to clear.
Can someone take a look and see if there is something i am missing?
thanks in advance. apologies it looks like crap. still a beginner
i should mention im very new to using interval and timeouts. Im having trouble understanding how the interval and clear interval works
This should help:
Basically it returns an id number which you can use with clearInterval to stop that interval from running.
i think i am on the right track but it still is not clearing interval. i dont know why my variable is not available in the clearInterval method
Well, it’s because of how this function is being done.
Every time you call this function it’s true.
It’s like doing if (true)
handleStart(){
if(this.state.running = true){
const myInterval = setInterval(()=>{
this.setState((prev)=>{
return {
timer: prev.timer - 1,
sessionLength: prev.sessionLength,
running: false,
startStop: 'Stop'}
})
}, 1000)
} else if (this.state.timer = 0){
} else {
clearInterval(myInterval);
this.setState({
running: false,
startStop: 'Start'})
}
}
there are ways around this, one is to pass a parameter in your function so you know whether it is stop or start. Another option is to store the interval id in a ref
Isnt the seState funtion changing the state.running to false? which would then trigger the other parts of the if statement?
No because your handStart function is an if/else block it first checks if state is true then runs the code within the block. Your code isn’t checking the right things.
Firstly, let’s start with your variable - you are redeclaring this variable each time the function is called - this won’t work. We need to start by creating a ref where we can hold the interval id. refs are good because they don’t cause a re render and whatever value we pass will stay there (it won’t reset)
Here’s a link to refs:
class App extends React.Component {
constructor(props){
super(props)
**this.myRef = React.createRef();** //an empty ref for storing our interval id.
this.state = {
timer: 1500,
sessionLength: 1500,
breakLength: 5,
**running: false,** //this should be false as it is not running on start.
startStop: 'Start'
}
this.breakIncrement = this.breakIncrement.bind(this)
this.breakDecrement = this.breakDecrement.bind(this)
this.sessionIncrement = this.sessionIncrement.bind(this)
this.sessionDecrement = this.sessionDecrement.bind(this)
this.handleStart = this.handleStart.bind(this)
this.handleReset = this.handleReset.bind(this)
}
Next, why are you checking if running is true? If running is true (timer is running), then why do you want to call setInterval again? This means you will never hit the else portions of your if. That’s why I was saying you’re basically doing if (true)
You want to check if the state is in running status, if it is don’t run that if statement.
This is how the handleStart function should be done.
handleStart(){
console.log(this.myRef.current);//log so you can understand what is happening
if(this.state.running != true){ //check if running, if not we need to start the interval
this.myRef.current = setInterval(()=>{
this.setState((prev)=>{
return {
timer: prev.timer - 1,
sessionLength: prev.sessionLength,
running: true, //set running to true because we are now running the interval
startStop: 'Stop'}
})
}, 1000)
} else if (this.state.timer == 1499){ // I have no idea what this is intended to do.
this.setState({
timer: 99999999
})
} else {
clearInterval(this.myRef.current); //if the state is running and this function is called
//(STOP button clicked) we will end up at this else statement which will stop our timer.
this.setState({
running: false,
startStop: 'Start'})
}
}
thanks for the help. I dont know what ref’s are and when i tried to look them up i couldnt figure out what you were talking about so i appreciate the link. Im going to read it now and then implement your suggestions.
Thanks a million
1 Like
i think i am getting further. or maybe just digging a deeper hole.
i think i understand somewhat ‘ref’ but i dont know why when i console.log my.current it logs a number. when a setInterval is called, does it name a digit every time it is called as an id? and that is was gets given to the ref?.
I am now at a point where i can start and stop timer during session time but i cant restart during break timer.
From Mozilla Docs on setInterval - This method returns an interval ID which uniquely identifies the interval, so you can remove it later by calling clearInterval() .
The reason you are getting new numbers in each log is because the interval is cleared and a then when you start again, a new number is generated. The number isn’t going to have the same id number which is why you need to store the interval id somewhere like in the ref.
A bit on the return value:
Return value
The returned intervalID is a numeric, non-zero value which identifies the timer created by the call to setInterval() ; this value can be passed to clearInterval() to cancel the interval.
Ref is an object that has a current property, you can store values there like the interval for clearing later on.
thanks jim. super helpful. i was having trouble understanding that on mozilla
I cant believe im as far as i am on this. This project has taught me so much. Still having some troubles
I had my session able to end and then my break session was starting but now my second interval isnt starting up neither is the setState method i have in it as well. The if statement is triggering the console.log in it but not the rest of the statements. Jim if you could take a peak and let me know what you think or anyone that has a minute.
Somehow the start of the break session is being missed and it is going to my handleReset method.
21 of 29 challenges completed.
:
Having some trouble with the ones that require the timer to land on 0:00.
i can make it appear to land on 0 by having the timers clear at 1 second but i dont think that is what the challenges want. Are there any suggestions about what i can do? Im really new to working with setInterval
i have the session and break lengths set to 5 seconds so its easier to check how to react when at 0
i am able to see each timer tick down to and show 0:00 but the error in the tests still shows ‘timer has not reacher 0:00’
i am wondering if there is something behind the scenes where the interval is stopping early but i am not seeing t because of where i have the clear interval placed in the function.
almost there!!! 27 of 29 tests completed. SOOOO EXCITED.
down to the last test.
it is that when ‘start_stop’ is clicked, the value should start with the displayed value in session length.
What i was thinking was using a this.state.starter that starts as false and then switches to true as soon as the first click happens and using the initial false value to trigger the first value to show to be the sessionLength value.
But it is still failing.
Gonna keep experimenting.
**** the test is saying it is failing because ‘expected 60 to equal 25’
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.