Resetting the timer of an observable in Angular 2

Question

Resetting the timer of an observable in Angular 2

I have a unique service that automatically calls a method every 30 seconds. There is also a button that allows the user to reset the timer, preventing the method from being called for another 30 seconds. How can I make sure that the method does not get called within the interval if the button is clicked?

COMPONENT

constructor(private customService: CustomService) {
  this.customService.initiate();
}

resetTimer(): void {
  this.customService.resetTimer();
}

SERVICE

initiate(): void {
    timer(0, 30000).subscribe(() => this.refresh());
}

resetTimer(): void {
  // Need guidance here
}

Currently, my component initializes the timer by calling the initiate() method in its constructor. The idea is that by calling resetTimer() in the component's HTML, it will eventually call the resetTimer() method in the service to restart the timer. Can you assist me with achieving this functionality?

Appreciate your help!

angular typescript rxjs observable

Answer 1

Answer №1

To achieve this functionality, I recommend utilizing the switchMap operator, which will unsubscribe from the previous timer and subscribe to a new one that starts from the beginning.

private reset$ = new Subject();

initialize(): void {
  this.reset$
    .pipe(
      startWith(void 0),
      switchMap(() => timer(0, 30000)),
    )
    .subscribe(() => this.refresh());
}

refreshTimer(): void {
  this.reset$.next(void 0);
}

It is important to note that the startWith operator is necessary in order to trigger the creation of the initial timer upon subscription.

Answer 2

To achieve this functionality, I recommend utilizing the switchMap operator, which will unsubscribe from the previous timer and subscribe to a new one that starts from the beginning.

private reset$ = new Subject();

initialize(): void {
  this.reset$
    .pipe(
      startWith(void 0),
      switchMap(() => timer(0, 30000)),
    )
    .subscribe(() => this.refresh());
}

refreshTimer(): void {
  this.reset$.next(void 0);
}

It is important to note that the startWith operator is necessary in order to trigger the creation of the initial timer upon subscription.

Answer 3

Answer №2

To reset the timer observable, it is recommended to first unsubscribe and then resubscribe.

t = timer(0, 30000);
sub: Subscription;

initialize(): void {
    this.sub = this.t.subscribe(() => this.refresh());
}

refreshTimer(): void {
    this.sub.unsubscribe();
    this.initialize();
}

Alternatively, you can combine both actions into one method:

t = timer(0, 30000);
sub: Subscription;

initTimer(): void {
    this.sub && this.sub.unsubscribe();
    this.sub = this.t.subscribe(() => this.refresh());
}

Answer 4

To reset the timer observable, it is recommended to first unsubscribe and then resubscribe.

t = timer(0, 30000);
sub: Subscription;

initialize(): void {
    this.sub = this.t.subscribe(() => this.refresh());
}

refreshTimer(): void {
    this.sub.unsubscribe();
    this.initialize();
}

Alternatively, you can combine both actions into one method:

t = timer(0, 30000);
sub: Subscription;

initTimer(): void {
    this.sub && this.sub.unsubscribe();
    this.sub = this.t.subscribe(() => this.refresh());
}

Resetting the timer of an observable in Angular 2

Answer №1

Answer №2

Similar questions

Attempting to eliminate any dates that have already occurred

Using Angular 4 to import an HTML file

TypeScript PatchBaseline with AWS CDK

What is causing the issue where search query parameters are not recognizing the initially selected option?

Adding items to the array is only effective when done within the loop

Transform an Angular 2 application to seamlessly incorporate an SDK

Dealing with asynchronous data in ngOnInit in Angular 4 when routing with parameters: tips and tricks

The parseFloat function only considers numbers before the decimal point and disregards

When triggering the event: Was anticipating a spy, however received a Function instead

Spring OAuth2 preflight responds with a 302 status code

When an import is included, a Typescript self-executing function will fail to run

Issue encountered during execution of tests involving reactive forms

Creating a TypeScript type that extracts specific properties from another type by utilizing an array of keys

Problem with Ionic2 star rating component

Display the length of the product array when I have multiple JSON objects

Exploring the integration of Angular framework with Laravel

How to incorporate a custom JavaScript file into an Angular 7 application

`The dilemma of z-index in a dropdown menu nested within an animated card`

Unloading a dynamically-loaded child component in Vue.js from the keep-alive cache

Angular 2 does not recognize the element 'child-selector' as valid