отменить функцию внутри angular

Я хотел бы добавить debounce для аргумента внутри функции

У меня проблема, потому что Angular debounce работает только для каналов и наблюдаемых, поэтому вместо этого я использую lodash debounce.

всякий раз, когда обновляется таблица таблицы данных ясности, она вызывает функцию onRefreshTable и передает объект события, который имеет фильтр таблицы и состояние сортировки.

Поскольку refreshTable() будет вызывать API, что занимает больше времени, я хотел бы свести к минимуму вызов API.

Иногда обновление таблицы вызывается несколько раз с одним или другим аргументом. Если другой аргумент, последний вызов обновления таблицы будет содержать все необходимые аргументы для передачи в 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
}

Я думаю об использовании DifferentUntilChanged, однако в этом случае это не работает, так как аргумент внутри функции не наблюдается.

Может быть, мне следует использовать _.cloneDeep вместо того, чтобы сравнивать предыдущие аргументы с текущими аргументами?


angular8 rxjs lodash debounce rxjs-pipeable-operators
person user21    schedule 16.10.2020    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вы можете использовать distinctUntilChanged(_.isEqual), и если у вас есть эталонное значение для сравнения, передать ***.next(JSON.parse(JSON.stringify(customerSearchInfo)))подобно этому.

Синппет кода:

  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())
  );
person g-wei xia    schedule 24.11.2020