Правильно настроить оператор throttleTime ()

Question

У меня есть кнопка, чей обработчик события щелчка установлен на функцию: <button (click)="someFunction(test1)">get stuff</button>

someFunction() делает что-то, но затем вызывает сервисную функцию, которая получает http.

 this._myService.getDetails(username).pipe(
      throttleTime(10000)
).subscribe()

В моем сервисе:

  getDetails(username: string) {
    return this._http.get(url);
  }

Это, очевидно, не сработает, потому что каждый раз, когда я нажимаю кнопку, выдается новый вызов http get.

Что было бы хорошим способомнастройки функции, подобной throttleTime (), при которой http-вызовы выдаются после определенного времени ожидания?

Answer 1

Вам нужен throttleTime (см. Сравнительную диаграмму мрамора ниже)

Тем не менее, в настоящее время вы ограничиваете поток ответов , вместо этого вам нужно ограничить поток нажатий кнопок .

Для этого мы можем создать поток из нажатий кнопок:

<button (click)="someFunction(test1)">get stuff</button>

class Component {
  btnClickSubject$ = new Subject<void>();
  someFunction(){
    this.btnClickSubject$.next(void 0);
  }
}

А затем *Map это запрос http-get:

class Component {
  //...

  destroy$ = new Subject<void>();

  ngOnInit() {
    this.btnClickSubject$.pipe(
      // throttle clicks
      throttleTime(3000),

      // switchMap or other *Map operator to switch to http-get
      switchMap(() => this._http.get('url')),

      // complete with component destroy *
      takeUntil(this.destroy$)
    )
    .subscribe(response => console.log(response))
  }


  ngOnDestroy() {
    this.destroy$.next(void 0);
  }

}

* Обратите внимание, что мы должны явно указать эту подписку для завершения с компонентом "onDestroy"

-

И вот сравнение debounceTime против throttleTime против AuditTime против sampleTime

Надеюсь, это поможет

Answer 2

Вам нужен оператор debounceTime .

debounceTime задерживает значения, испускаемые источником Observable, но падает предыдущие отложенные отсроченные выбросы, если на Наблюдаемый источник. Этот оператор отслеживает самое последнее значение из источника Observable, и испускает это только тогда, когда dueTime достаточно время прошло без каких-либо других значений в источнике Наблюдаемое. Если новое значение появляется до наступления молчания dueTime, предыдущее значение будет сброшено и не будет выводиться на выход Наблюдаемое.

См. Пример здесь .

Официальные документы RxJS: здесь .