How can I debounce a function which gets called on an "keyUp" event?
Here is my code:
My Function
private handleSearch(searchTextValue: string, skip?: number): void { this.searchTextValue = searchTextValue; if (this.skip === 0 || typeof skip === "undefined") { this.skip = 0; this.pageIndex = 1; } else { this.skip = skip; } this.searchTextChanged.emit({ searchTextValue: searchTextValue, skip: this.skip, take: this.itemsPerPage }); }
My HTML
<input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">
Bassically what I'm trying to achieve is that handleSearch
gets called a few moments after the user stop typing.
I found out i can use lodash's _debounce()
for this, but I haven't found out how to put this on my keyUp
event.
(keyup) is an Angular event binding to respond to any DOM event. It is a synchronous event that is triggered as the user is interacting with the text-based input controls. When a user presses and releases a key, the (keyup) event occurs.
debouncelinkEmits a notification from the source Observable only after a particular time span determined by another Observable has passed without another source emission.
What is debounce? Debounce delays the processing of a function bound to a certain user input event until a certain amount of time has passed. In other words the function is only executed once per specific user input event, even it the event is triggered multiple times.
Debouncing is a programming practice used to ensure that time-consuming tasks do not fire so often, that it stalls the performance of the web page. In other words, it limits the rate at which a function gets invoked.
UPDATE: Using RXJS 6 pipe operator:
this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); });
You could create a rxjs/Subject and call .next() on keyup and subscribe to it with your desired debounceTime.
I'm not sure if it is the right way to do it but it works.
private subject: Subject<string> = new Subject(); ngOnInit() { this.subject.debounceTime(500).subscribe(searchTextValue => { this.handleSearch(searchTextValue); }); } onKeyUp(searchTextValue: string){ this.subject.next(searchTextValue); }
HTML:
<input (keyup)="onKeyUp(searchText.value)">
An Update for Rx/JS 6. Using the Pipe Operator.
import { debounceTime } from 'rxjs/operators'; this.subject.pipe( debounceTime(500) ).subscribe(searchTextValue => { this.handleSearch(searchTextValue); });
Everything else is the same 👍
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With