Ways to Halt observable.timer in Angular 2

Question

Ways to Halt observable.timer in Angular 2

As I work on Angular2's Component, I am currently implementing the following functions:

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 am trying to figure out how to stop the repetition of Observable.timer once the data is correctly stored using setFormData().

If you have any ideas on how to achieve this, please let me know.

javascript angular typescript rxjs rxjs5

Answer 1

Answer №1

There are essentially two methods:

invoke unsubscribe() on the Subscription object received from the subscribe() method .
utilize an operator

To solely unsubscribe, you can accomplish it like so.

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

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

Alternatively, you can utilize Subject to finalize the Observable using the takeUntil() operator:

this.subject = new Subject();

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

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

Also check out these resources:

Difference between .unsubscribe to .take(1)
RxJS: takeUntil() Angular component's ngOnDestroy()

January 2019: Updated for RxJS 6

Answer 2

There are essentially two methods:

invoke unsubscribe() on the Subscription object received from the subscribe() method .
utilize an operator

To solely unsubscribe, you can accomplish it like so.

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

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

Alternatively, you can utilize Subject to finalize the Observable using the takeUntil() operator:

this.subject = new Subject();

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

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

Also check out these resources:

Difference between .unsubscribe to .take(1)
RxJS: takeUntil() Angular component's ngOnDestroy()

January 2019: Updated for RxJS 6

Answer 3

Answer №2

When you need to stop a timer observable, simply use the unsubscribe method as shown below:

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

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

Answer 4

When you need to stop a timer observable, simply use the unsubscribe method as shown below:

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

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

Answer 5

Answer №3

An aspect not yet addressed by previous responses is that there's no necessity to actively halt an observable timer/interval - especially not through direct interaction with the observable or the timer itself.

I came across this realization while setting up an observable using a timer in the start method of a HostedService. When it was time to stop, I thought I should be stopping or disposing of something, right? Well... not exactly. The observable timer doesn't require being stopped or disposed of in that manner; only the subscriptions need to be cleared, and here's why...

Observable timers and intervals are classified as cold streams (even though they may give the impression of being hot). They remain passive until subscribed to, do not generate data until then, and cease producing data when there are no subscribers. As such, removing all subscriptions should suffice in halting the timer from generating data.

For more information, visit: [

Answer 6

An aspect not yet addressed by previous responses is that there's no necessity to actively halt an observable timer/interval - especially not through direct interaction with the observable or the timer itself.

I came across this realization while setting up an observable using a timer in the start method of a HostedService. When it was time to stop, I thought I should be stopping or disposing of something, right? Well... not exactly. The observable timer doesn't require being stopped or disposed of in that manner; only the subscriptions need to be cleared, and here's why...

Observable timers and intervals are classified as cold streams (even though they may give the impression of being hot). They remain passive until subscribed to, do not generate data until then, and cease producing data when there are no subscribers. As such, removing all subscriptions should suffice in halting the timer from generating data.

For more information, visit: [

Answer 7

Answer №4

Have you ever considered turning it into a promise instead?

import { timer } from 'rxjs';

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

No more worrying about unsubscribing.

Answer 8

Have you ever considered turning it into a promise instead?

import { timer } from 'rxjs';

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

No more worrying about unsubscribing.

Answer 9

Answer №5

-- temporary fix

setInterval(() => observer.notify(), 2000);

Answer 10

-- temporary fix

setInterval(() => observer.notify(), 2000);

Ways to Halt observable.timer in Angular 2

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Assigning a specific data type value to an element as it enters the top of the viewport

If there are multiple instances of the component, it may not function properly

Can test files be placed under the pages directory in a Next.js project?

ES6 scoping confusion: unraveling the mystery

Looking for a method to substitute "test" with a different value

Ensure the browser back button navigates to the login page seamlessly, without displaying any error

Include images in the form of .png files within the td elements of a table that is dynamically generated in the index

Using both Typescript and Javascript, half of the Angular2 application is built

When aggregating data using Mongoose expressions, Number, Boolean, and ObjectId types are not compatible

Sending information into MySQL using NodeJS with the help of Postman

Automatic Formatting of Typescript in SublimeText

Is it possible to enable password authentication on Firebase even if the user is currently using passwordless sign-on?

Avoiding Bootstrap loading in a Hyperledger Composer application

Tips for preserving updates following modifications in Angular 5/6?

Implementing TypeScript type definitions for decorator middleware strategies

Navigation arrows for sliding`

Material-UI chart displays only loading lines upon hovering

establish the data type for the key values when using Object.entries in TypeScript

What is the best way to attach a Label to a THREE.Mesh object?

Unable to access the response body of a POST request from an external API within Firebase Cloud Functions