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

Issues with hydrating React local storage hook in custom implementation within NextJS

When transitioning from Angular5 to Angular6, it seems that the angular.json file has not been properly updated

Encountering an error in Angular2 and TypeScript: TS2322 error message stating that the type 'Response' cannot be assigned to type 'UserStatus'

Navigating through different views in Angular 2 using UI Router and ng2 routing directly from

Manually Enroll Node Module

Issue with Ionic 4 IOS deeplinks: Instead of opening in the app, they redirect to the browser

Encountering a npm lifecycle error upon restarting

Steps for specifying the required type of an Object literal in Typescript

What is the procedure for cancelling a file upload in the FileUpload component of PrimeNG?

Obtaining Data from a Database Using Angular

The index access type cannot be used with T[Key extends keyof T]

How can we properly retrieve data in order to update the user interface using the useEffect hook and useState in React

Angular Proxy is not passing the WebSocket Upgrade Header

What causes a typed string literal to be recognized as a pure string in TypeScript?

What is the proper way to specify the interface as Dispatch<Action>?

Ways to extract a Bearer Token from an Authorization Header using JavaScript (Angular 2/4)

Is there a way to install @types that are compatible with an outdated version of TypeScript?

Verifying data types on combined function parameters

Is it possible to trigger a script tag based on certain conditions using a JavaScript function?

The dynamic form functionality is experiencing issues when incorporating ng-container and ng-template