javascript – 如何使用rxjs在angular2中的输入keyup事件上实现去抖服务

我正在尝试调用输入加密事件的服务.

HTML

<input placeholder="enter name" (keyup)='onKeyUp($event)'>

下面是onKeyUp()函数

onKeyUp(event) {
    let observable = Observable.fromEvent(event.target, 'keyup')
        .map(value => event.target.value)
        .debounceTime(1000)
        .distinctUntilChanged()
        .flatMap((search) => {
            // call the service
        });
    observable.subscribe((data) => {
        // data
    });
}

从浏览器的网络选项卡中可以看出,它正在调用每个按键事件的键盘功能(正如它应该做的那样),但我想要实现的是每个之间1秒的去抖时间.服务电话.此外,如果我移动箭头键移动,则会触发事件.

plunkr link

解决方法:

所以链是非常正确的,但问题是你正在创建一个Observable并在每个keyup事件上订阅它.这就是它多次打印相同值的原因.只有多个订阅,这不是你想要做的.

显然有更多方法可以正确地做到这一点,例如：

@Component({
  selector: 'my-app',
  template: `
    <div>
      <input type="text" (keyup)='keyUp.next($event)'>
    </div>
  `,
})
export class App implements OnDestroy {

  public keyUp = new Subject<KeyboardEvent>();

  private subscription: Subscription;

  constructor() {
    this.subscription = this.keyUp.pipe(
      map(event => event.target.value),
      debounceTime(1000),
      distinctUntilChanged(),
      mergeMap(search => of(search).pipe(
        delay(500),
      )),
    ).subscribe(console.log);
  }

  ngOnDestroy(): void {
    this.subscription.unsubscribe();
  }
}

查看更新的演示：http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

2019年1月：更新了RxJS 6

标签：javascript,angular,typescript,rxjs,rxjs5
来源： https://codeday.me/bug/20190925/1817502.html