以角度延迟调用keyup事件

Question

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

这是html代码:

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

这是ts代码:

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

这里是我想搜索"文本"字符串的例子,但事件发生了4次,我想这只发生一次"text"字符串:

什么解决方案？

Answer 1

欢迎来到Observable的世界.只需使用Observable即可获得所需的结果.获取组件中输入的引用并使用此代码.debounceTime将让事件至少在1 second之前的触发器之后触发.keyup当用户快速输入时,它将不允许您触发.

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

在该subscribe方法中,您可以编写逻辑.这value是输入的值.

Answer 2

查看模板.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();
                }
                );
              }