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

Question

我正在编写一个程序，该程序调用使用文本框在表格上显示数据的方法。问题是它每次调用程序超过 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();
  }

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