Javascript 调用具有角度延迟的keyup事件

我有一个文本框，并为它分配了一个搜索功能

keyup

event，但我希望它能延迟发生，而不是每次按键都发生

以下是html代码：

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

下面是一个示例，我想搜索“文本”字符串，但事件发生了4次，我只想搜索“文本”字符串一次：

解决方案是什么？

欢迎来到。只需使用Observable即可获得所需的结果。获取组件中输入的引用并使用此代码

debounceTime

将允许事件在上一次触发后至少

1秒后触发。当用户快速键入时，它将允许您不必对每个
键启动

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

在
subscribe
方法中，您可以编写逻辑。
值是输入的值。
查看template.html

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

此解决方案适合我

查看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>

我们不能使用超时功能吗

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

怎么了？我只想在“文本”字符串中发生一次尝试使用debounce。。。。！这可能有助于获取可观察到的错误
。fromEvent不是一个使用rxjs 6.3的函数。3@amphetamachine仅使用
fromEvent
使用
rxjs
高于6的版本只需要
fromEvent
而不是
Observable。fromEvent
感谢您的帮助，这对我有很大帮助=D，但在此上下文中“this.source”是什么？当
keyup（）
同时发生多个事件时，此解决方案不起作用。
<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>

  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));
    }
  }

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