javascript - 以 Angular 延迟调用 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 次，我希望只对“文本”字符串发生一次:

什么解决方案？

Answer 1

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

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

在subscribe 方法中你可以写你的逻辑。 value 是输入的值。