Set Intervals with RxJS interval and timer Operators
It is quite common to need an Observable that ticks periodically, for instance every second or every 100 miliseconds. We will learn about operators interval() and timer(), both of which are similar to setInterval() in JavaScript.
[00:00] Now we're going to look at more practical operators. These are especially related to time. It's quite common to need an observable that ticks periodically, for instance, every second or every 100 milliseconds. We're talking about an alternative to setInterval.
[00:14] Let's start by creating an observable called foo with observable.create such that for each observer that subscribes, we are going to set an interval to run a function, let's say, every one second. Every one second, we're going to deliver a value to the observer.
[00:35] Which value will we deliver? Let's say we deliver zero. Actually, instead of zero, let's deliver a sequence of values starting at zero, like i is initialized at zero. If we deliver i, it's zero. Then we can increment i. The next time this function runs, i will be one. Next time, it will be two, three, four, etc.
[00:59] If we run this, we will see after one second the value is zero. Then, every one second, we see the next number. Instead of writing all of this, it would be practical to have a shortcut to making these observables, and there is. There's an operator called interval which takes one argument, which is the period.
[01:20] If we give 1,000 for one second, we will see the same observable. Interval has internal to it this machinery of remembering the values and incrementing them. We can also change this to make it faster. 100 milliseconds will run faster.
[01:36] There's something really important to know about interval, is that it sets a separate interval for each observer that subscribes. Let me demonstrate. If I set a timeout to run a function after let's say, one and a half seconds, I am going to subscribe to the same observable.
[02:00] Remember, because observable executions are not shared like we saw in the beginning of the course, the second observer that subscribes won't see the same numbers at the same time. Let's try that.
[02:14] We first see zero. Then after one and a half seconds, the other one subscribes. Because it set its own interval, they won't be seeing the same values at the same time. That's always important to keep in mind when dealing with observables and time.
[02:31] There's also another operator that we can look at, which is called timer. Timer is very similar to interval. Interval took just one argument called period, but timer takes two. It takes the start time, and it takes the period. I can do something like after three seconds, we will start. After we start, every one second we will tick.
[02:56] It's basically saying, wait for three seconds. Then after three seconds, start doing the same thing that interval did. If I run this, it waits for three seconds. After that, it starts to tick every one second. A timer can receive the start time as a number to indicate the milliseconds. But it can also take a JavaScript date. Let's see how we can do that.
[03:23] If we do new date, we get the time now. If we do get time, we get the time stamp. We can add three seconds to that. Then we can make this become a date as well, some new date. This date is basically the date JavaScript object for now plus three seconds. If I run that, after three seconds it will start. When it starts, it ticks every one second.
[03:54] If you want, you could for instance, insert your birthday here. Then this observable, foo, will start ticking on your birthday. After that, it will tick every one second. That's how we make observables related to time in RxJS.
i is a function-scoped variable that the inner function has access to through its variable scope chain (think closures). Variables defined by var has function scope, which is quite different from the block scope defined by let and const, or the variable scope of other programming languages like C and Java. Observables don't actively maintain it - Javascript does.
It was unclear (magical even) where the index value "i" was initialized and maintained in the second version of the code. It continues to be delivered to the subscribers but makes no appearance in the code.
You say @ 1:30 or so that the new Observable has internal to it the machinery of remembering the increment, but how did it get there? It looks in the code as if you reasssigned foo, with no mention of those internals and yet it was transferred.
Can you explain what I'm missing here? Ta.