Help with Pomodoro Clock animation (Buggy animation)

1

Hi guys, I’ve got the basic functionality down for the Pomodoro Clock project (I think). Here’s the link : https://codepen.io/travismchan/pen/rLQaJA

But the animation is super buggy when I pause/reset it and I’m not sure how to fix it. To see it, just click the -5 to change it to 5 minutes. Hit start, pause and it looks fine. But if you try to resume it the fill animation goes wonky and blinks, same issue with reset.

Any ideas?

2

Anytime you set a timer in JS, you have to stop the timer, too. setinterval() returns a sort of ID that you can use to cancel the timer, which you will need to do when you pause.

var timer = setInterval(function doAThing() {...}, 1000);

// when pausing...

clearInterval(timer)

I think that the way you have it right now, you’re creating multiple timers, and that’s why your animation looks wonky.

3

Hmm, I’ll try to redo the whole thing tomorrow. I was thinking of just pulling a Niantic and disabling the buttons once the timer has started but that’s less fun…