Proper implementation of a timer/stopwatch
I am struggling to understand how to properly implement a timer in a reactive library/framework like SolidJS. What I want is 3 buttons:
- start
- reset
- stop
I need to represent time in
minutes| seconds | 100ms(1/10 of a second)
So, what would be a good way to implement a timer like this? Thank you!
6 Replies
https://playground.solidjs.com/anonymous/cc0510eb-7ea2-415f-b808-617bb6b96e7a
something like this?
Solid Playground
Quickly discover what the solid compiler will generate from your JSX template
yes, exactly like this! Thank you very much! 🙂
I rewrote it to use Date.now() for it to not go out of sync if an application potentially laggs or something like that
great idea!
makes much more sense
@triplesmile should
onCleanup not be outside of the effect?in this case we want to clean up the interval if the effect runs again. This ensures that there is always only one interval running or none, if the timer got stopped
This is from the onCleanup docs:
Registers a cleanup method that executes on disposal or recalculation of the current reactive scope. Can be used in any Component or Effect.
@giyomoon ah thx, thought it has to be called at the first level of a component.