This lesson is for PRO members.

Unlock this lesson NOW!
Already subscribed? sign in

Stopping a Stream with TakeUntil

4:10 RxJS lesson by

Observables often need to be stopped before they are completed. This lesson shows how to use takeUntil to stop a running timer. Then we use the starting stream and the stopping stream together to create a simple stopwatch.

Get the Code Now
click to level up

egghead.io comment guidelines

Avatar
egghead.io

Observables often need to be stopped before they are completed. This lesson shows how to use takeUntil to stop a running timer. Then we use the starting stream and the stopping stream together to create a simple stopwatch.

Avatar
Alex

Hi John!

Great series, thanks!

One question: how would you handle a case when start/stop button is the same button?

Alex.

Avatar
John

There's a few different approaches depending on the exact behavior you want. Here's one implementation:
https://gist.run/?id=1185b7701932b028401b

In reply to Alex
Avatar
Alex

Amazing!
Thank you.

In reply to John
Avatar
nader dabit

For those of you looking for docs or info about switchMap and switchMapTo, it looks like these were added in version 5.0, they were previously known as flatMapLatest -> https://github.com/ReactiveX/rxjs/blob/master/MIGRATION.md

Avatar
Julia

In the lessen 'Stopping a Stream with TakeUntil' I tried to add error and complete handlers to the subscribe call and on complete function was never called when the stop button is clicked. Any idea why?

Avatar
John

@Julia - takeUntil will stop the stream it's attached to, so if you want to complete the start$ stream, you would need to move the takeUntil down:

start$
    .switchMapTo(interval$)
    .takeUntil(stop$)
    .subscribe(
      x=> console.log(x),
      err => console.log(err),
      ()=> console.log('complete')

);

Just be aware you'll no longer be able to click the start button, because the start$ is completed.

In reply to Julia
Avatar
Julia

Thanks a lot. It works. Reading rxjs documentation it is not obvious what is the "complete" behaviour of each operator, especially when multiple streams are combined. Any suggestions?

In reply to John
Avatar
Rafael

Yep, when I started this video, my idea was to simply chain a takeUntil(stop$) on top of what we already had, something like this:

start$
  .switchMapTo(interval$)
  .takeUntil(stop$)
  .subscribe(x => console.log(x));

So I didn't understand when you did something different. It was when I tried it myself that I realized that the code above will take start$ until stop$, so it only worked once. On this case it's really just the interval$ that we want to takeUntil(stop$).

Really enjoying this @John!

In reply to John

...to stop an observable, let's first make a stop button with a label of stop so we'll have something to click on over here. Then, we can duplicate the query selector, change it to stop, rename it to stop button.

Let's start the interval that we already made right away by subscribing to it. We'll log out each tick. We'll hit save. You can see it just starts working automatically without me clicking on anything.

To stop this, you might think because subscribe returns a subscription that we could then take the stop button that we already have a reference to, create an observable from event, stop button click.

Then whenever we click on this, we'll subscribe to this, we want to get the subscription and unsubscribe. I'll hit "save." You'll see that our timer starts automatically, zero, one, two. I'll hit stop and our timer stops.

Again, the way this is working right now is we have an interval, which is an interval of one second. We subscribe to it which returns a subscription. Then, we create an observable from a stop button click. We say when you click unsubscribe from that interval which stops it. Again, this is completely wrong. Do not do it this way.

Instead of getting references to subscriptions, you have streams work together. We want it interval that goes until a stop button interval fires. What that looks like, I'll delete this subscribe, and I'll take this observable. I'll cut it.

I want this interval to run until which is take until is the operator we'll use. The other observable, I pasted the from event stop button, I want it to run until it gets that click.

I'll go ahead and save now. You can see it counts zero, one, two, three. I'll hit stop. The timer stopped. This interval kept on pushing values until it got a stop button click.

Let's clean this up a bit. I don't need the subscription anymore. I can extract this a bit. I'll cut this out. I'll call this a stop. Then, I'll just take until stop. When I save, this should work the exact same way with the time running zero, one, two, stop and it stops.

Now, if I delete this subscribe, I can get a reference to this observable. We'll call it interval that stops to be very explicit.

Now, I can use this as a standalone stream. Subscribe to it and get that same behavior, console log, hit save. We'll get a timer that starts zero, one, two, stop, and it stops.

Now that we have this interval that stops stream, let me delete this that we just wrote. I'm going to take our original start interval stream here. I'll cut this and paste it at the bottom. Now, instead of switch mapping to an interval, I'm going to switch map to an interval that stops. I'll hit save.

You'll see that the timer doesn't start right away. I'll hit start now. The timer will start. I'll come and click stop. The timer stops. I'll just delete this reference. We don't need it

You can read this as a start which is a start button click, which will fire and then switch to an interval that stops. An interval that stops is an interval which is an interval that fires every one second. That will run until a stop button is clicked from stop button click. We have all the pieces put together for a very simple timer that starts and stops...

HEY, QUICK QUESTION!
Joel's Head
Why are we asking?