为什么Observable.create（）中的setInterval（）继续运行？

Question

I'm studying rxjs Observables and I couldn't understand why the setInterval inside Observable.create is still running even I have unsubscribe to that observable object. Observable is async right? When it supposed to stop?

I have this code for reference:

var cancellableObserver = Observable.create((observer:any)=>{
try {
    observer.next("anyeong")
    observer.next("ande")
    console.log("logged once")
    setInterval(()=>{
        //this code block will keep running for every 2secs
        observer.next("eotteokke") //but this line will stop after unsubscribe
        console.log("will log every 2secs")
    },2000)
} catch (err) {
    observer.error(err);

}});

var cancellableSubscription = cancellableObserver.subscribe(
(x:any) =>addItem(x),
(err:any) =>addItem(err),
() => addItem("cancellable completed"));

setTimeout(() => {cancellableSubscription.unsubscribe();console.log("mary");}, 6001);

Answer 1

setInterval is scheduled by JavaScript's runtime. When you unsubscribe from an Observable that called setInterval no-one tells the runtime to cancel the scheduled action. You might actually want to keep the interval running in some use-cases.

So instead you have to call clearInterval yourself on unsubscription that you return from the Observable 's callback:

const source$ = new Observable(observer => {
  const handler = setInterval(...);

  ...

  return () => clearInterval(handler);
});

Answer 2

setInterval is not dependent on your observable, it will continue running until you clear it by using the clearInterval() function. To clear the interval, you have to use the returned intervalID (which is returned from setInterval() ).

Examples:

// Assigning an intervalID to a variable
const intervalID = setInterval(() => {
 // Do some stuff here...
}, 2000);

// Clearing an interval
clearInterval(intervalID);

Source and further information