Check out a free preview of the full Rx.js Fundamentals course
The "Intervals & Timers Solution" Lesson is part of the full, Rx.js Fundamentals course featured in this preview video. Here's what you'd learn in this lesson:
Steve walks through the solution to the intervals and timers exercise.
Transcript from the "Intervals & Timers Solution" Lesson
[00:00:00]
>> All right, so our mission was to get comfortable with timer interval I think we're all pros at this point and then the idea of subscribing unsubscribing to observables. Now the we talked about this before we lead into this which is we're gonna have to do things like store the observable kinda in the module scope, kinda like the global scope.
[00:00:25]
Because we don't have the tools to kind of start and stop I talked a big game with like generators. Which kinda this is in this case rice generating a number at a regular interval. And again we could start we could stop and we skip and could switch between them we can do all that.
[00:00:39]
Again we have not put that all together in our tool set yet so our goal right now is just get comfortable subscribing, subscribing. Dealing with the idea that we could have, events coming from our, sort of a stream of observable bands coming from a button. Setting all that up and then we'll begin to kind of refine it and refactor it as we go along.
[00:01:00]
So here we have a basic counter. And we wanna do is start by basically listening to stuff on that. We wanna subscribe to events that come from start button, we wanna subscribe to events that come from the pause button. So in this case, we will say, Start, Subscribe, I'll pass that in a function.
[00:01:31]
And in this case we will go ahead and we'll create one up here. And we'll say when we go ahead and we start we'll set the interval. And we'll subscribe to it as well and in this case we're going to call set count and we need the dollar sign.
[00:02:04]
And here we'll actually make an interval in this case. Will subscribe to it and when they hit the pause button we'll go ahead and we will, Right, and so we should have that in place. And now we have this, and let's go ahead and let's try it out.
[00:02:42]
And iterates every second. Now we can pause it. And it starts over because we get a brand new observable each time we're creating a new interval observable, it starts in the same place. Now, this in this case is technically, our subscription because this is creating the observable, and we have subscribe up here, right?
[00:03:01]
So really, what we could do is say, I want one observable And that will store the subscription. And so take the same observable, And will subscribe and unsubscribe from it Both it feels a little weird with the fact that we're storing this up here. But it's also not totally dissimilar from thing we might store ,we might hold on to a subscription when react mounts that component we might subscribe.
[00:03:43]
When the component is about to unmount we might unsubscribe from it. Use effect, Angular has built in syntax for this. Spelt will, you wrap it slightly to get it to both, subscribe and unsubscribe as well. And we've got the subscription. Now it'd be great if we could actually like, kind of just take the difference of events coming from the buttons and handle this all internally in our observable stream.
[00:04:07]
We're not totally there yet, but we should be able to do it. Not too long from now.
Learn Straight from the Experts Who Shape the Modern Web
- In-depth Courses
- Industry Leading Experts
- Learning Paths
- Live Interactive Workshops