Cancel previous observable returned from another function

Question

I have a situation where i need to cancel an previous observable if new observable is returned. See below

function fooService(timeOut: number): Observable<string> {
    return new Observable(subs => {
        setTimeout(() => {
            subs.next(new Date().toTimeString());
        }, timeOut);
    });
}

function barComponent(timeOut: number): void {
    // here it should cancel previous subscription if this function called again
    fooService(timeOut).subscribe(
        time => console.log(time)
    );
}


barComponent(5000);
barComponent(2000); // i need to cancel last call

Answer 1

You can save the observable subscription to a variable then call unsubscribe if it's been called once like this:

 let observableInstance; function fooService(timeOut: number): Observable<string> { return new Observable(subs => { setTimeout(() => { subs.next(new Date().toTimeString()); }, timeOut); }); } function barComponent(timeOut: number): void { if (observableInstance) { observableInstance.unsubscribe(); } observableInstance = fooService(timeOut).subscribe(time => console.log(time)); } barComponent(5000); barComponent(2000);

Working stackblitz:

https://stackblitz.com/edit/rxjs-mb38xc?devtoolsheight=60