How to stop an interval on an Observable in RxJS

javascript rxjs observable rxjs5
selanac82 picture selanac82 · Oct 26, 2017 · Viewed 20.3k times · Source

I have a specific situation where I'm using an RxJS interval, but at any given moment I may need to stop that interval. I assumed there was something easy like a cancel() or stop(). Similar to clearTimeout. This is possible to stop an interval once it's going? If not, what would be another approach.

Basically I have a large array that I'm stepping through. But there are external things that could happen that make it necessary to stop that step through and continue on to a new task. I'm hoping it's something simple that I'm just missing in the docs. Thanks

Answer

Nicholas Tower picture Nicholas Tower · Oct 26, 2017

This is possible to stop an interval once it's going?

You can use the .takeUntil operator to complete an observable when some other observable emits. You'll of course need to set that other observable up to emit values in a way that is useful to you, but here's an example that stops an interval after 5 seconds:

Rx.Observable.interval(100)
  .takeUntil(Rx.Observable.timer(5000))
  .subscribe(val => console.log(val));
<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.min.js"></script>

Related questions

Rxjs Subject next() after complete()

I have service which connects with Subject() to do paging. I'm using next(newData) to pass to subject, which keeps things alive, now I need to use complete() on each ajax call and pass it to subject. but after doing …

Read More
RxJS: Observable.create() vs. Observable.from()

What's the difference between these two? return Observable.create(function(observer) { if (array) observer.next([]); else observer.next(null); observer.complete(); }); and return Observable.from( array ? [] : null ); I thought it could be the same but didn't work the same.

Read More
Return an empty Observable

The function more() is supposed to return an Observable from a get request export class Collection{ public more = (): Observable<Response> => { if (this.hasMore()) { return this.fetch(); } else{ // return empty observable } } private fetch = (): Observable<Response> => { …

Read More