Delay the Emission of Values from an RxJS Observable

[00:00] Next, let's look at a very simple transformational operator, which is called Delay. Delay takes a parameter, which is a number -- here, meaning milliseconds, so this means one second -- and it really does what you expect. It delays each of these emissions by one second, so it happens one second later in time.

[00:19] This observable here, the input, has these five numbers, and they're happening every half a second, as we specified here. The output, it waits for one second, and then it does what the input did. It basically gives the same values, but shifted in time a bit. Let's see this work in practice. Let's call Delay, give one second of delay for each of these emissions.

[00:46] When we run, it waits for one second, and then, every half a second, it emits. Just to make this more obvious, we can emit these every 100 milliseconds, which is really short, then we can delay by two seconds, and then this is going to look a bit more obvious. It's waiting now for two seconds, and then it started it quickly. That's what delay does. It's really straightforward.

[01:10] Another thing is that you can give here, instead of number, a date. We have this other example here, where we have this date that refers to the time of one second in the future.

[01:25] When we run this, it does essentially the same thing that we had before, but it is now encoded as a date. You could replace this date with your birthday, which means that once your birthday happens, let's say here, that would be when the input observable starts. You could give a date, as well.

[01:48] Delay is pretty straightforward, but there's a variant of Delay called delayWhen. DelayWhen takes, instead of a number as an argument, a function. A function has an argument here, X, which means each of these values being emitted by the input observable, and as an output, you're supposed to return an observable. That observable determines how much will we delay that particular X event happening on the input observable.

[02:20] We're going to delay it by one second and we need the first one, so we're just taking one. We would plot this in the marble diagram, delayWhen will take X as each of these values, zero, one, two, and we're going to map that to how much delay should happen. This is interval one second, take one, drawn as a marble diagram, and we'd put that here.

[02:47] That's how much each of these will be delayed. That actually means that you get the same output here as we did when we had delay 1,000 milliseconds, but delayWhen allows you to give a variable amount of delay here, instead of a constant amount. What we could do is use this X here to determine how much should we delay.

[03:13] If we do something like this, then when X is zero, we get a zero delay. When X is one, we get 100 milliseconds of delay, but then, when X is two, we get 2 times 2 is 4, so we get 400 milliseconds. As you can see, these will be delayed by more and more amount of delay, the more time passes.

[03:36] We're going to see something interesting here. We're going to see the bigger the number is -- this input X is -- the more delay it will have. As you can see, in the beginning, it was quite fast. Then, in the end, it's a bit slower, because each of these emissions has a variable amount of delay.

[03:58] DelayWhen and Delay are rather obvious on what they do. It's even in the name. They are useful for things like UI animations or server communication, when you want to repeat a request only after waiting for a while. This kind of thing is the type of logic that you build with Delay and delayWhen.