如何在 RxJS 中完成 Observable

Question

Let's say we have an Observable :

var observable = Rx.Observable
    .fromEvent(document.getElementById('emitter'), 'click');

How can I make it Complete (what will trigger onComplete event for all subscribed Observers ) ?

Answer 1

In this present form, you cannot. Your observable is derived from a source which does not complete so it cannot itself complete. What you can do is extend this source with a completing condition. This would work like :

var end$ = new Rx.Subject();
var observable = Rx.Observable
    .fromEvent(document.getElementById('emitter'), 'click')
    .takeUntil(end$);

When you want to end observable , you do end$.onNext("anything you want here"); . That is in the case the ending event is generated by you. If this is another source generating that event (keypress, etc.) then you can directly put an observable derived from that source as an argument of takeUntil .

Documentation:

• http://reactivex.io/documentation/operators/takeuntil.html
• https://github.com/Reactive-Extensions/RxJS/blob/master/doc/api/core/operators/takeuntil.md

Answer 2

What worked for me is using the take() operator. It will fire the complete callback after x number of events. So by passing 1, it will complete after the first event.

Typescript:

private preloadImage(url: string): Observable<Event> {
    let img = new Image();
    let imageSource = Observable.fromEvent(img, "load");

    img.src = url;

    return imageSource.take(1);
}

Answer 3

I think what you are looking for is the dispose() method.

from: https://github.com/Reactive-Extensions/RxJS/blob/master/doc/gettingstarted/creating.md#cold-vs-hot-observables

Notice that the subscribe method returns a Disposable, so that you can unsubscribe to a sequence and dispose of it easily. When you invoke the dispose method on the observable sequence, the observer will stop listening to the observable for data. Normally, you do not need to explicitly call dispose unless you need to unsubscribe early, or when the source observable sequence has a longer life span than the observer. Subscriptions in Rx are designed for fire-and-forget scenarios without the usage of a finalizer. Note that the default behavior of the Observable operators is to dispose of the subscription as soon as possible (ie, when an onCompleted or onError messages is published). For example, the code will subscribe x to both sequences a and b. If a throws an error, x will immediately be unsubscribed from b.

Answer 4

The original answer is bit complicated, i found an easier way to do this, here is how:

const subscription$ = interval(1000).pipe(
  finalize(() => console.log("End")),
).subscribe();

setTimeout(() => {
  subscription$.unsubscribe();
}, 4000);

The finalize is also triggered on unsubscribe.