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毫秒后连续输入的文本。

如何使用RxJs去抖动实现此行为。我非常感谢您的帮助

Answer 1

您可以通过反应形式输入控制valuechanges（）实现此目标。

模板：

<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));

Answer 2

要实现此目的，您需要使用-

fromEvent，它将捕获目标元素的事件。 debounceTime
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

收集用户按键事件输入2秒钟，然后清除它

2 个答案: