Timer is BUGGED
Hey, I am trying to build a Pomodoro clock. When I click in the "start" button everything works perfectly and the times begin from 25:00min until 00:00. And when I click in the "paused" button, it pauses as expected. BUT, if I click multiple times in the start/paused button, it starts behavior strangely, like the timer start and stop rapidly or skips over parts of the countdown altogether, mostly in the seconds... How can I solve it?
https://codepen.io/ssstephanyyy/pen/vYVydRz
14 Replies
I think you will need a debounce / throttle function.
So the timer doesn't have to reset too fast multiple times because of continues clicking, which is causing the weird numbers.
@therealmarsman can you show me how can I do it please?
Yes one second
Ok
Sorry for the delay 😬
Got busy, but also..
There were couple of things in your code that needed more than just a debounce . I made a CodePen and also there's explanation inside it.
See lines:
1 ( the debounce function)
28
50 ( where I applied the debounce on the event listener)
60 ( i changed the logic a bit there for whenever the user clicks on the button )
70
Also i added lines 85-86
As a beginner, it's been hard to understand your code, mostly the debounce function😅
@therealmarsman is there another way to resolve my problem?
You can ignore the debounce function for now
See the other things i added..
I'll try to explain more in a few, just busy cleaning the house it's holiday tomorrow hehe
Thanks
I think you are creating multiple intervals; each time you start your timer, you create a new interval, but don't clear the currently running one. This means the more you start/pause, the more confused the count down will appear.
Try clearing the interval before you create a new one. This will ensure that you only have one.
I updated your code here:
https://codepen.io/nephiw/pen/qBJqzYg
If you clear the interval before each start, you have to make sure you keep the
currentTime up to date and only use startTime when resetting the currentTIme.
I also reset the startButton label on reset. 🙂
You are definitely getting stronger with JavaScript.Thanks so much 😊👍