проблема с оператором debounceTime rxjs и запросом http на функцию ввода keyup

Question

Я пытаюсь реализовать поиск на стороне сервера в angular7. Я нашел некоторый код для реализации этого, но, к сожалению, это не работает должным образом. Когда я ищу строку, она отправляет несколько HTTP-запросов, но это должен быть только один http-запрос. вот мой код.

    fromEvent(this.simpleSearchInput.nativeElement, 'keyup').pipe(
      debounceTime(500),
      switchMap((search: any) => {
        return this.usersService.simpleUserSearch(search.target.value);
      })
    ).subscribe(res => {
      this.queryUsers = res.result.data;
      console.log('User Name is :' + res);

    }); 
  }

Answer 1

Вот грубый пример, основанный на вашем коде.Запишите журнал и попробуйте поиграть с таймингами для debounceTime и delay, чтобы увидеть, как это влияет на поведение:

var { timer, fromEvent, of } = rxjs;
var { debounceTime, map, switchMap, delay, tap } = rxjs.operators;


var theInput = document.getElementById('the-input');

fromEvent(theInput, 'input').pipe(
  map(e=>e.target.value)     // read value from input
  , tap(console.info)        // realtime input log
  , debounceTime(1000)       // time till reaction
  // mocking long server request {{{
  , switchMap(q => of(q.toUpperCase()).pipe(
      tap(q => console.info('[requested]', q)),
      delay(2000),         // server ping time
      tap(q => console.info('[returned]', q))
  ))
  // }}}
).subscribe(res => {
  console.log('Result is: ' + res);
});

<script src="https://unpkg.com/rxjs@6.4.0/bundles/rxjs.umd.min.js"></script>

<input
  id="the-input"
  type="text"
  placeholder="Start typing"
  />