Обработать нажатие клавиши по таймеру

118

08 марта 2022, 01:10

Пытаюсь реализовать живой поиск на Angular.

Мой HTML:

<input type="text" class="form-control" id="searchBox"
  autocomplete="off" placeholder="Search"
  [(ngModel)]="searchNoteValue"
  (input)="onSearchChange($event.target.value)"
/>

TypeScript:

onSearchChange(searchValue: string): void {
    timer(1000).subscribe(() => {
        this.searchNotes();
    });
}

В данной реализации функция вызывается по кол-ву нажатых клавиш. Пример ввожу в инпут "АВС", проходит секунда -> отправляется 3 запроса с "АВС". Как сделать так, чтобы функция вызывалась один раз?

Answer 1

Это реализация через реактивные формы:

this.searchFormGroup.controls['search'].valueChanges
  .pipe(debounceTime(200), takeUntil(this.ngUnsubscribe))
  .subscribe((val) => {
    /* реализация вашего метода */
  });

Реализация через шаблон:

/** В теле компоненты */
public searchEventEmitter: Subject<string> = new Subject<string>();
ngOnInit() {
    /*
     * Подписываемся на события эмиттера. Как только пройдет 
     * 200 милисекунд с последнего события выполниться код в subscribe 
     */
    this.searchEventEmitter
        .pipe(debounceTime(200), takeUntil(this.ngUnsubscribe))
        .subscribe((val) => {
            /* реализация вашего метода */
        });
}
onSearchChange(searchValue: string): void {
   /** При каждом изменении кидаем событие*/
   searchEventEmitter.next(searchValue);
}