I'm finding it hard to implement debounce on an HTTP request with Rxjs once a button is clicked. What I'm trying to achieve is when the button is click, it should wait for x seconds before the post is been made to the server.
btnClick() {
this.loader = true;
let send = "";
send = this.checkForm.username.value;
this.checkService
.validate(send)
.pipe(finalize(() => (this.loader = false)))
.subscribe((response) => {
console.log(response)
});
}
I would do something like calling a subject from the button click event handler to insert some debounce time, and then switchMap the post call
btnClicked$: Subject <string> = new Subject<string>();
ngOnInit(): void {
this.btnClicked$.pipe(
debounceTime(500),
switchMap((send) => this.checkService.validate(send).pipe(
finalize(() => (this.loader = false)))),
take(1)
).subscribe()
}
btnClick(): void {
this.btnClicked$.next(this.checkForm.username.value);
}
