如何在打字稿中的输入搜索框中添加去抖时间？

Posted 2023-02-05

如何在搜索表数据数据的动态搜索框中添加去抖时间？我在网站上看了一些解决方案，但我的代码有点不同，我没有使用任何油门或其他东西，所以我只是困惑。

我的模板代码：

<input matInput (keyup)="applyFilter($event.target.value)" placeholder="Search element">

和打字稿是：

applyFilter(filterValue: string) 
    this.tableDataSource.filter = filterValue.trim().toLowerCase();

我想添加去抖时间，因为搜索将每2秒进行一次，而不是每次更改都会发送大量请求。

提前致谢

我试图用管道从另一个方法调用该方法

filterData(filterValue: string) 
    this.applyFilter(filterValue).pipe(debounceTime(2000))

但现在它说，管道在类型void上不存在

答案

您正在对字符串使用管道运算符。您只能对Observable使用管道。所以，你应该在你的组件中创建一个Subject。 RxJS中的Subject既是Observable又是Observer。换句话说，它会发出值，并在值更改时侦听该值。

private searchSub$ = new Subject<string>();

applyFilter(filterValue: string) 
    this.searchSub$.next(filterValue)


ngOnInit() 
   this.searchSub$.pipe(
     debounceTime(400),
     distinctUntilChanged()
   ).subscribe((filterValue: string) => 
     this.tableDataSource.filter = filterValue.trim().toLowerCase();
   );

当applyFilter()方法调用每个按键时，Subject会发出filterValue。在你的ngOnInit()中，你应该听取/订阅你的主题，所以你可以使用pipe运算符和debounceTime。

另一答案

只需使用lodash-decorators和lodash

import  Debounce  from 'lodash-decorators';

class AnyClass 
  constructor() 
    ...
  

  @Debounce(100)
  filterData(filterValue: string) 
    ...
  

另一答案

模板：

<input matInput (input)="terms$.next($event.target.value)" type="text" 
  placeholder="Search element">

零件：

private terms$ = new Subject<string>();

ngOnInit () 
  this.terms$.pipe(
    debounceTime(400), // discard emitted values that take less than the specified time between output
    distinctUntilChanged() // only emit when value has changed
  ).subscribe(term => 
    // do your search with the term
  );