The ability to reply to discussions is limited to PRO members. Want to join in the discussion? Click here to subscribe now.

Stopping a Stream with TakeUntil

Stopping a Stream with TakeUntil

4:10
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.
Watch this lesson now
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
Avatar
Ming

Hi
Thanks for these series , but I couldn't continue watching it and here is why:
Almost all of the series which you are the teacher , starts from somewhere unlcear and ends in somewhere unclear.
It looks like you've spent a day discovering , while taking videos and talking, Angular2, rxjs, raact and everything and then at the end you've split them in random episodes and chunks.
You don't even say hello at the beginning of the course,.
you don't even bother introducing yourself, you always start off a function and keep adding stuff to it.
Have a look at this one, you start from absolutely no where without even saying hi, and then you continue with takeUntill without giving any context at all.
Generally seems like you don't give a f about the listeners and you just want to finish your work.
Almost everytime I hear your voice at the beginning of a series, I just stop watching it because I know I need to go and google every single thing you're using.
Could you for the love of JavaScript, at least define your start and ending points.
Cheers

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