Блог

Главная - Вопросы по программированию - Как использовать keyup и debouncer rxjs?

Как использовать keyup и debouncer rxjs?

#angular #rxjs

#angular #rxjs

Вопрос:

Как бы я использовал debounce, чтобы запускался только после того, как пользователь перестал печатать? В настоящее время я keyup запускаю эту функцию:

 userTyping() {
    let searchTerm = this.form.get('query');
    searchTerm.valueChanges
      .debounceTime(1000)
      .subscribe(() => this.searchForUser());
  }

Я в принципе не хочу, чтобы при вводе say james в поиске запускалось несколько запросов, я хочу, чтобы он запускался только после того, как пользователь перестанет печатать на определенное время.

Комментарии:

1. Просто напишите код для изменения значений в ngOnInit или constructor

2. Не могли бы вы объяснить мне, почему это сработает?

3. Потому что вы подписываетесь на valueChanges (событие Angular), которое будет срабатывать всякий раз, когда значение элемента управления изменилось. В вашем случае, всякий раз, когда вы что-то вводите, будут запускаться valueChanges , и после отмены код внутри subscribe будет выполняться. Проверьте, например, это …

4. debounceTime уже делает то, что вы хотите. Это отменит предыдущее запланированное значение и создаст новое. stackblitz.com/edit/rxjs-xyvqnc?file=index.ts

5. Вы уверены, что не вызываете userTyping() метод при каждом нажатии клавиши?

Ответ №1:

 ngOnInit() {
    this.userTyping()
  }
  userTyping() {
    let searchTerm = this.form.get('query');
    searchTerm.valueChanges.pipe().debounceTime(1000)
      .subscribe(() => this.searchForUser());
  }