Реализация отложенного выполнения с помощью rxjs

Question

Мне нужно реализовать своего рода отложенное выполнение некоторых действий. Например, когда вы вводите строку поиска и не хотите, чтобы поиск отправлял запрос на сервер, пока пользователь не прекратит печать. Вроде того, что мы все видим в поисковых системах, таких как Google и т. Д. Как лучше всего реализовать это с помощью rxjs?

Answer 1

Создайте FormControl и прослушайте изменения, используя этот фрагмент:

<input [formControl]="control">

... 

public control = new FormControl();

this.control.valueChanges
  .pipe(
    debounceTime(300),
    distinctUntilChanged()
  )
  .subscribe((value: string) => {

    // Do stuff with the value
  }
);

Не забудьте отписаться;)

Answer 2

Для этого можно использовать оператор debounceTime :

const textInput$ = fromEvent(this.yourInput.nativeElement, 'keyup');

textInput$.pipe(
  debounceTime(500), // discard emitted values that take less than 500ms
  switchMap(text => this.getSearch(text)) // getSearch is your request to the server
)
.subscribe();

Answer 3

То, что вы описываете, звучит как классическая функциональность заголовка.

Я бы рекомендовал прочитать об операторе debounceTime(). Typeahead

Это прекратит прием дополнительных запросов, пока не пройдет определенное время, и только затем передаст ваш запрос.