以角度延迟调用keyup事件

Question

我有文本框并为其分配keyup事件搜索功能，但我希望它发生延迟，而不是每次按键

这是html代码：

<input type="text" [(ngModel)]="searchedKPI" (keyup)="searchConfigTree()">

这是ts代码：

list = list.filter(item => item.label.toLocaleLowerCase().includes(this.searchedKPI.toLocaleLowerCase())).slice();

以下是我想搜索“text”字符串的示例，但事件发生了4次，我想这只发生一次“text”字符串：

解决方案是什么？

Answer 1

欢迎来到Observable's world。只需使用Observable即可获得所需的结果。获取组件中输入的引用并使用此代码。 debounceTime会让事件至少在前一次触发后1 second之后触发。当用户快速键入时，它将不允许您在每个keyup上触发。

Observable.fromEvent(yourInput, 'keyup').debounceTime(1000).subscribe(value => /* */)

在subscribe方法中，您可以编写逻辑。 value是输入值。

Answer 2

查看template.html

<input type="text" [(ngModel)]="searchedKPI" (keyup)="searchConfigTree()" #something>

component.ts（不要忘记实现AfterViewInit）

     source: any;
     @ViewChild("something") something:ElementRef; 

     ngAfterViewInit(): void {
                this.source = fromEvent(this.something.nativeElement, 'keyup');
                this.source.pipe(debounceTime(1200)).subscribe(c => 
                {
                          list = list.filter(item => item.label.toLocaleLowerCase().includes(this.searchedKPI.toLocaleLowerCase())).slice();
                }
                );
              }

Answer 3

此解决方案对我有用

查看Template.html

<input type="text" placeholder="Filter..." class="form-control" [(ngModel)]="filter" (input)="searchChange($event.target.value, true)">
<button class="btn btn-primary" type="button" (click)="searchChange(filter, false)"><i class="fa fa-search"></i></button>

Comonent.ts

  filter= '';
  private timer: any;

  searchChange(filter: string, to = false) {
    filter = filter.toLowerCase();

    if (to) {
      clearTimeout(this.timer);

      this.timer = setTimeout(() => {
        this.valuesFilter = this.allValues.filter(f => f.field.toLowerCase().includes(filter));
      }, 400);
    } else {
      this.valuesFilter = this.allValues.filter(f => f.field.toLowerCase().includes(filter));
    }
  }

Answer 4

我们不能使用超时功能吗？

(keyup)="keyupFunc()" --> html
keyup() {
       timeout((your function code), delay_time_you_need);
   } --> ts