How to Stop observable.timer in Angular2

Question

I am implementing the following functions in Angular2's Component:

export class MypageEditComponent {

  ngOnInit() {
    this.timer = Observable.timer(100, 100);
    this.timer.subscribe(t => {
      this.setFormData();
  }


  private setFormData() {
    this.editUserAcountType = this.authStore.registerInfo.account_type;
    this.editAddress = this.authStore.registerInfo.email;
    this.editUserName = this.authStore.registerInfo.username;
  }
}

I want to stop the repeat of Observable.timer once the value is correctly stored with setFormData().

But do not know how, please tell me.

So you want to stop it after executing once? Or are you waiting for `this.authStore.registerInfo` data to be set somewhere so you need to keep calling `setFormData` until the data arrives? — Saravana, May 18 '17 at 05:39
If you know how much time it takes to receive the data, why don't you use an operator like delay. — Nugu, May 18 '17 at 05:41
It doesn't seem to be a good idea to do that. If you give more information about what you're trying to achieve, maybe we might point another direction to handle your problem — maxime1992, May 18 '17 at 06:39

martin · Accepted Answer · 2019-01-15T11:06:57.750

There're are basically two ways:

call unsubscribe() on the Subscription object returned from the subscribe() call .
use an operator

To just unsubscribe you could do it like this.

ngOnInit() {
  this.subscription = timer(100, 100).subscribe(t => {
    this.setFormData();
  });
}

private setFormData() {
  ...
  this.subscription.unsubscribe();
}

Or you can use Subject to complete the Observable via takeUntil() operator:

this.subject = new Subject();

ngOnInit() {
  timer(100, 100).pipe(
    takeUntil(this.subject),
  ).subscribe(t => this.setFormData());
}

private setFormData() {
  ...
  this.subject.next();
}

Have a look these as well:

Jan 2019: Updated for RxJS 6

I didn't know we could unsubscribe from within the subscription block. Good to know. — Stephane, Apr 29 '20 at 06:59

Pardeep Jain · Answer 2 · 2017-05-18T06:02:56.863

14

you can use unsubscribe method when you want to stop timer observable like this

this.timer = Observable.timer(100, 100);
this.subscription = this.timer.subscribe(t => {
    this.setFormData();
});

.............
this.subscription.unsubscribe();

edited May 18 '17 at 06:02

answered May 18 '17 at 05:44

Pardeep Jain

84,110
37
165
215

why so many downvotes ? is this answer wrong ? even answer of @martin having same code as i posted – Pardeep Jain May 18 '17 at 05:59
Yes. `unsubscribe` is called on a `Subscription`, not on an `Observable`. – cartant May 18 '17 at 06:00
okii but answer does't provide any wrong information right ? afterall you have to use unsubscribe method right ? than why downvote ? – Pardeep Jain May 18 '17 at 06:02
i know code is correct but not different i think, still thanks for let me know i have edited my answer – Pardeep Jain May 18 '17 at 06:03
Now that you've edited it, it's correct. The unedited code was incorrect. – cartant May 18 '17 at 06:04
1

hmm @cartant may be you are right, i just post the code before testing, i think that is my mistake – Pardeep Jain May 18 '17 at 06:05

score 3 · Answer 3 · answered May 29 '19 at 00:15

A nuance which previous answers haven't really covered is that there is no need to stop an observable timer/interval - at least not by interacting with the observable or the timer itself.

I found myself here because I was setting up an observable using a timer in a HostedService's start method, and in the stop method it seemed like I should be stopping it, or disposing of something surely? - well... no. The observable timer does not need to be stopped or disposed in this way, only the subscriptions, and this is why...

Observable timers and intervals are examples of cold streams (though they appear to behave as hot). They are passive not active, they do not produce data till subscribed to, and stop producing data when no subscribers. Therefore, disposal of all subscriptions should be all that's required to stop the timer producing data.

More info here... [http://introtorx.com/Content/v1.0.10621.0/14_HotAndColdObservables.html]

score -1 · Answer 4 · answered Nov 30 '19 at 00:09

-1

xD did you know you can make it a promise?

import { timer } from 'rxjs';

timer(1000).toPromise().then(res => {
      //code here  
})

no need to deal with unsubscribe.

answered Nov 30 '19 at 00:09

Alexander J. Mercer

1
1
1

score -2 · Answer 5 · answered Dec 18 '19 at 13:13

-2

-- workaround

setTimeout(() => observable.next(null) , 2000);

answered Dec 18 '19 at 13:13

Muhammed Moussa

4,589
33
27

How to Stop observable.timer in Angular2

5 Answers5

Linked