在 angular 中去抖一个函数

Question

我想为函数内的参数添加去抖动

我遇到问题是因为 Angular 去抖动仅适用于管道和可观察对象，所以我改用 lodash 去抖动。

每当清晰度数据网格table刷新时，它会调用onRefreshTable函数并传递具有table过滤和排序状态的事件对象。

由于 refreshTable() 将调用 API 这需要更长的时间，我想尽量减少 API 调用。

有时 table 使用相同参数或不同参数多次调用刷新。如果参数不同，最后的 table 刷新调用将包含所有需要的参数以传递给 API.

我的尝试在代码中没有错误，但它仍然在 1 秒后使用相同的参数调用函数几次，

import * as _ from lodash;
onRefreshTable(event: ClrDatagridStateInterface<any>) {
        _.debounce((event) => {
            this.refreshTable(event)
        }, 1000);     
}
refreshTable(event) {
   // save state to the rxjs store 
   // call API which is expensive
}

我正在考虑使用 distinctUntilChanged，但它似乎不适用于这种情况，因为函数内的参数是不可观察的。

也许我应该使用 _.cloneDeep 来比较之前的参数和当前的参数？

Answer 1

可以用distinctUntilChanged(_.isEqual)，有参考价值的可以这样传***.next(JSON.parse(JSON.stringify(customerSearchInfo)))

代码sinppet：

  customerSearchQuery = new Subject<CustomerQueryInfo>();
  customerSearchQuery$ = this.customerSearchQuery.pipe(
    map(queryInfo => {
      queryInfo.keyWord = queryInfo.keyWord.trim();
      return queryInfo;
    }),
    debounce(queryInfo => {
      if (queryInfo.skip > 1 || queryInfo.keyWord === '') {
        return interval(0);
      }
      return interval(800);
    }),
    distinctUntilChanged(_.isEqual),
    switchMap(queryInfo => this.scmContext.BA_Customers.GetPage(queryInfo).Execute())
  );

在 angular 中去抖一个函数

debounce a function inside angular

rxjs

lodash

debounce

rxjs-pipeable-operators

angular8