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

Is there a mistake in the TypeScript guide for custom typography in MUI5?

What causes delayed state updates in React/NextJS until another state is updated or a fast refresh occurs?

Efficient method for iterating through three arrays that have matching values and satisfy specified conditions in TypeScript

Tips for implementing personalized command buttons in Kendo Grid with AJAX request utilizing JavaScript

Develop a plugin architecture using JavaScript and Node.js

The issue with executing event.keyCode == 13 in Firefox remains unresolved

Trouble with document updates in MongoDB/Mongoose causing a delay?

An issue with JSPDF arises when used on mobile devices

REACT performance impacted by slow array filtering

Navigating the Angular2 @angular/router 3.0.0-alpha.3 - Ways to access the route name or path upon route transitions

AngularJS tips for resolving an issue when trying to add duplicates of a string to an array

Issue with swal() not triggering in Internet Explorer 11

Creating a sliding menu using React and Headless UI (with Tailwind CSS)

I'm having trouble persisting my mongoose model data in my MongoDB database

What is the best way to insert a chart into a div using *ngIf in Angular?

Obtaining JSON data in an Angular service: A beginner's guide

Is it possible to refresh resources in Node.js without the need to restart the server?

How can I remove a row from a mat table using Angular?

The AnimationRendererFactory ahead-of-time (AOT) compilation is encountering an issue where it is unable to access the property 'create

Enhancing CKEditor: Inserting new elements upon each dialog opening