Intervals & Timers

[00:00:00]
>> So let's talk a little bit about time. So the other thing that we might deal with in our applications is things that happen, right now, everything we've dealt with so far, originally with from an of was synchronous events. With from event, we were just responding to events as they kind of bubbled up through the DOM.

[00:00:17]
In this case we also have some abilities to kind of like, play with time as well. And so another way that we can create observables, is with this helper utility function called interval. Interval, creates a observable stream that will go ahead and produce values at whatever number of milliseconds that you want.

[00:00:41]
Again, where this becomes super useful is we've separated the ability to produce values from immediately doing a set timeout, and just they're happening, right? Here, you actually get them and you can work with them. Yeah.
>> You can subscribe to this from many listeners that we can use reuse this component.

[00:01:02]
>> We can reuse it, yep. One of the interesting things a little caveat there, you can reuse it. And because again, we've separated the idea of producing values on a time interval, from do anything with those values. Each subscription will actually get its own copy, the interval utility function starts with value, starts at I believe 0, 1, 2, so on and so forth.

[00:01:27]
Here, I'm subtracting it from starting time just to see that, hey, it's happening every second. Now you look at it's like, why is it 1002? Because JavaScript set timeout, that's when it puts it on the event loop, not necessarily when it executes. So if you've had multiple subscriptions that each start from the beginning, there is a way to share one observable across many subscribers and when we get to operators.

[00:01:50]
We'll take a look at that as well probably a little sooner than I anticipated cuz it's come up a few times when we'll look at it in a playground as well. But yeah, it's again separating the idea of producing values from doing things for those values. Again, with a set timeout, these things are roughly coupled clear interval, you've got to keep track, you have basically the same API for subscribing, unsubscribing for all of these different things.

[00:02:13]
Timer is similar to interval, the only difference is timer in kind of give it a value, it will emit a value after that much time, right? So, interval will do it after that much time and continue, it will not do one immediately. Timer will also, it will immediately, it will do it as soon as you have the time and then you could actually give it a second value where it will continue to produce values like an interval.

[00:02:36]
So, if you needed one where I give me a value now and then every other second, we probably use timer for that. So, you look at two arguments, it will produce its first value after 2 seconds, and then every 5 seconds after that, so you might say something like 0.

[00:02:51]
And then every second after that, that would start you immediate event, and then you get one every other second. It really just depends on what you need to do for what the right choice is. And yeah, they just behave slightly differently, that's all. One of the things that we're probably gonna have to deal with a little bit.

[00:03:09]
Now that we have infinite values, is how do I make it stop, [LAUGH] right? Like the event situation that we had before with the button clicks. I mean, yeah, we did not, we never unsubscribed from it. But like one way to handle this is just stop clicking the button, right?

[00:03:29]
But as soon as we start, if we were running through one of those infinite generators we're talking about before, making it stop is sometimes super important. So it turns out that when we subscribe to an observable, we get back a subscription object. It's got a bunch of methods.

[00:03:46]
It's got the ability to add other subscriptions, so you can unsubscribe from a bunch at once. But the one that we care about at this moment is the ability to unsubscribe. Now notice I'm using a set timeout that feels a little wonky. If that is the way that you feel that is a good feeling.

[00:04:03]
We just don't have the tools yet to do it the right way. We are again building up that toolset of understanding. But we can unsubscribe from observable by calling the unsubscribe method. That will work, if we had a generator producing a synchronous values. That will work on a from event.

[00:04:20]
That will work on any of these timer intervals as one common API for making anything stop. If you need to make stuff stop, you just reply to that email all caps unsubscribe and then you have unsubscribed from that observable and you are good to go.