собирать данные о событиях в течение 2 секунд, а затем очищать

Question

у меня

private userInputTimer;
private userInputText = '';

private handleEvent(event: KeyboardEvent): void {
 if((keyNum >= 48 && keyNum <= 90) || (keyNum >= 96 && keyNum <= 105)){  
      this.userInputText = (this.userInputText) ? this.userInputText : '';
      this.userInputText = this.userInputText + keyCode;
      clearTimeout(this.userInputTimer);
      this.setUserInputClearTimer();
  }

setUserInputClearTimer(){
 this.userInputTimer = setTimeout(() => {
  this.userInputText = '';
  }, 500);
}

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

Как я могу добиться такого поведения, используя debx RxJs. Буду очень признателен за помощь

Answer 1

Для этого вам нужно использовать -

1. fromEvent, который будет захватывать событие целевого элемента.debounceTime
2. debounceTime для задержки событий

Вот фрагмент

Observable.fromEvent(this.targetElement, 'keyup') //<-- put the event you want to capture
      // get value
      .map((evt: any) => evt.target.value) //<-- you can ignore this if you don't want the value from the control
      .debounceTime(2000)
      .subscribe((text: string) => {
           this.setUserInputClearTimer();
       });

Вот пример, который вы можете сослаться на https://stackblitz.com/edit/angular-rxjs-observable-form-input-debounce-kebtnt

Answer 2

Этого можно добиться с помощью значений управления вводом реактивной формы ().

Шаблон:

<form [formGroup]="formGrp">
<input type="text" formControlName="userInputText" name="username"/>
</form>

Компонент:

this.formGrp.get('userInputText').valueChanges().pipe(
  debouneTime(2000),
  map((_enteredText)=>{
    const enteredText = _enteredText;
    this.formGrp.get('userInputText').setValue('');
    return enteredText;
  })
).subscribe(value=> console.log(value));