如何去除在“keyUp”事件中调用的函数?
这是我的代码:
我的功能
- 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 });
- }
我的HTML
- <input type="text" class="form-control" placeholder="{{ 'searchquery' | translate }}" id="searchText" #searchText (keyup)="handleSearch(searchText.value)">
我想要实现的是,在用户停止输入后,handleSearch会被调用一段时间.
我发现我可以使用lodash的_debounce(),但我还没有找到如何将它放在我的keyUp事件上.
您可以创建一个rxjs / Subject并在keyup上调用.next()并使用您想要的debounceTime订阅它.
我不确定这是否是正确的方法,但它有效.
- 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)">