Trigger Service With A Delay

Question

Currently I am using Lodash decorator to delay a service call on drop down value change. In the select tag, I did something as follows:

(onSelectionChange)="logUserSearchData()"

In the TypeScript file, I've the following:

logUserSearchData() {
   logService();
}

@Debounce(10000)
logService() {
   this.logService().subscribe();
}

In the above code snippet, the logService() is triggered after 10s whenever there's a change in drop down or value change. Is there a way in RxJS to do the same without using the Lodash decorator?

Naren Murali · Accepted Answer · 2024-11-09 17:37:55Z

1

You have to move the code to the ngOnInit hook and then use debounceTime of rxjs to perform the debounce operation.

We use a subject to emit values, which will be received on the ngOnInit and get debounced.

private subject: Subject<void> = new Subject<void>();
private sub: Subscription = new Subscription();

ngOnInit() {
  this.sub.add(
    this.subject.pipe(
      debounceTime(500), 
      switchMap(() => this.logService()), // <- switches to the inner observable and discards still running operations of the method.
    ).subscribe()
  );
}

logUserSearchData() {
  this.subject.next();
}

      
ngOnDestroy() {
  this.sub.unsubscribe();
}

edited Nov 9, 2024 at 17:37

answered Nov 9, 2024 at 16:37

Naren Murali

66.2k6 gold badges51 silver badges96 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

user8512043 Over a year ago

Alright @Naren Murali, will this work with `onSelectionChange' event of the drop down box as I require that to work with it at the same time?

Naren Murali Over a year ago

@user8512043 updated my answer, forgot to add the method that fires for onSelectionChange event

user8512043 Over a year ago

See this if you can make it work - stackoverflow.com/questions/79175167/… @Naren Murali. Thanks for all the efforts.

Tom S Over a year ago

You should consider using takeUntilDestroyed, which allows you to remove the dedicated sub property and eliminates the need for an ngOnDestroy method in this case.

Naren Murali Over a year ago

@TomS sure will incorporate going forward

|

Collectives™ on Stack Overflow

Trigger Service With A Delay

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related