Angular 2 – Debouncing keyUp事件

前端之家收集整理的这篇文章主要介绍了Angular 2 – Debouncing keyUp事件前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
如何去除在“keyUp”事件中调用函数

这是我的代码

我的功能

  1. private handleSearch(searchTextValue: string,skip?: number): void {
  2. this.searchTextValue = searchTextValue;
  3. if (this.skip === 0 || typeof skip === "undefined") {
  4. this.skip = 0;
  5. this.pageIndex = 1;
  6. } else {
  7. this.skip = skip;
  8. }
  9. this.searchTextChanged.emit({ searchTextValue: searchTextValue,skip: this.skip,take: this.itemsPerPage });
  10. }

我的HTML

  1. <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订阅它.

我不确定这是否是正确的方法,但它有效.

  1. private subject: Subject<string> = new Subject();
  2.  
  3. ngOnInit() {
  4. this.subject.debounceTime(500).subscribe(searchTextValue => {
  5. this.handleSearch(searchTextValue);
  6. });
  7. }
  8.  
  9. onKeyUp(searchTextValue: string){
  10. this.subject.next(searchTextValue);
  11. }

HTML:

  1. <input (keyup)="onKeyUp(searchText.value)">

猜你在找的Angularjs相关文章