有没有办法在一秒钟后调用 onkeypress 事件，这样它就不会多次触发一个方法？答案

【问题标题】：Is there a way to call the onkeypress event after a second so that it wouldn't fire a method a bunch of times?有没有办法在一秒钟后调用 onkeypress 事件，这样它就不会多次触发一个方法？
【发布时间】：2021-07-29 13:42:45
【问题描述】：

我正在编写一个程序，该程序调用一个使用文本框在表格上显示数据的方法。问题是它每次调用程序超过 10 次。有没有办法避免这种情况？

这是文本框：

<input #input matInput placeholder="Search data" (keyup)="onKeypressEvent($event)">

这是我调用的方法：

  onKeypressEvent(event: any){
    fromEvent(this.input.nativeElement,'keyup')
        .pipe(
            debounceTime(150),
            distinctUntilChanged(),
            tap(() => {
                this.paginator.pageIndex = 0;
                this.loadData();
            })
        )
        .subscribe();
  }

【问题讨论】：

标签： angular typescript rxjs angular-material

【解决方案1】：

发生这种情况是因为每次按键都会创建一个新链，因此debounceTime() 没有什么可以去抖动。而是制作一个主题并按下按键。然后在构造函数或 onInit() 中只订阅一个：

keyPress$ = new Subject();

...

keyPress$.pipe(
  debounceTime(150),
  distinctUntilChanged(),
  tap(() => {
    this.paginator.pageIndex = 0;
    this.loadData();
  }),
).subscribe();

...

onKeypressEvent(event: any) {
  this.keyPress$.next(event);
});

【讨论】：

您可以将tap 代码移动到subscribe 方法。结果相同，但我猜更容易阅读
@martin 数据加载速度变慢是有原因的还是因为去抖动时间？
@kajl16 这就是debounceTime 所做的。也许看看auditTime和sampleTime和throttleTime

【解决方案2】：

根据您现有的代码，您似乎正在使用@viewChild()。

这是简单而有效的解决方案。这样可以避免使用额外的Subject。

ngAfterViewInit() {
    fromEvent(this.input.nativeElement, "keyup")
      .pipe(debounceTime(1000)) // Update the debouceTime as per your wish
      .subscribe((val: KeyboardEvent) => {
        console.log(this.input.nativeElement.value);
      });
  }

别忘了在onDestroy退订。

【讨论】：