Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Angular 2 - Debouncing a keyUp event

Tags:

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.

like image 607
Nicolas Avatar asked Mar 13 '17 10:03

Nicolas


People also ask

What is Keyup enter in angular?

(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.

What does debounce do angular?

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 input debounce?

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.

What is debounce?

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.


2 Answers

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)"> 
like image 199
Ploppy Avatar answered Oct 03 '22 15:10

Ploppy


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 👍

like image 22
Arron McCrory Avatar answered Oct 03 '22 14:10

Arron McCrory