RxJs 6 Оператор DebounceTime не работает должным образом

Question

У меня есть запрос, который я хочу отсеивать каждую секунду:

this.service.doStuff(data)
            .pipe(
                debounceTime(1000),
                distinctUntilChanged()
            )
            .subscribe(data => {
               foo();
            }, () => {
                console.error("server error");
            });

Функция DoStuff:

public doStuff(data: any){
        return this.http.post(streetSearch, data).pipe(
            map(res => res.json()));
    }

этот код выполняется из события (keyup) из input.Проблема в том, что всякий раз, когда я отпускаю клавишу, вызывается вызов.Очевидно, это не то, что я хотел.

То, чего я пытаюсь добиться, - это выполнять httpCall только тогда, когда я не нажимаю клавишу, по крайней мере, в течение секунды (вот почему происходит откат).

Чего мне не хватает?

Answer 1

этот код выполняется из события (keyup) ввода

означает, что каждый раз, когда вы нажимаете клавишу, этот код запускается.

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

Вместо этого вы должны слушать изменения значений вашего ввода.

myFormControl.valueChanges.pipe(
  debounceTime(1000),
  switchMap(value => this.service.doStuff(value)),
  distinctUntilChanged(),
).subscribe(...);