如何使用 rxjs 在 angular2 中实现输入 keyup 事件的去抖动服务 [英] How to achieve a debounce service on input keyup event in angular2 with rxjs

问题描述

我正在尝试在输入按键事件时调用服务.

HTML

下面是onKeyUp()函数

onKeyUp(event) {让 observable = Observable.fromEvent(event.target, 'keyup').map(value => event.target.value).去抖动时间(1000).distinctUntilChanged().flatMap((搜索) => {//调用服务});observable.subscribe((data) => {//数据});}

从浏览器的网络选项卡中发现，它在每个按键事件上调用按键功能(正如它应该做的那样)，但我试图实现的是一个去抖动时间每次服务呼叫之间间隔 1 秒.此外，如果我移动箭头键移动，则会触发该事件.

plunkr 链接

解决方案

所以这个链确实是正确的，但问题是你正在创建一个 Observable 并在每个 keyup 事件上订阅它.这就是为什么它多次打印相同的值.只是多个订阅，这不是您想要做的.

显然有更多的方法可以正确地做到这一点，例如:

@Component({选择器:'我的应用'，模板:`<div><input type="text" (keyup)='keyUp.next($event)'>

`，})导出类 App 实现 OnDestroy {public keyUp = new Subject();私人订阅:订阅；构造函数(){this.subscription = this.keyUp.pipe(地图(事件 => 事件.目标.值)，去抖动时间(1000)，distinctUntilChanged(),mergeMap(search => of(search).pipe(延迟(500)，)),).订阅(控制台.日志)；}ngOnDestroy(): 无效 {this.subscription.unsubscribe();}}

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

2019 年 1 月:针对 RxJS 6 更新

I am trying to call to a service on input key-up event.

The HTML

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

Below is the onKeyUp() function

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

It was found from the network tab of the browser that, it is calling the key-up function on every key-up event(as it is supposed to do), but what I am trying to achieve is a debounce time of 1sec between each service call. Also, the event is triggered if I move the arrow key move.

plunkr link

解决方案

So the chain is really correct but the problem is that you're creating an Observable and subscribe to it on every keyup event. That's why it prints the same value multiple times. There're simply multiple subscriptions which is not what you want to do.

There're obviously more ways to do it correctly, for example:

@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();
  }
}

See your updated demo: http://plnkr.co/edit/mAMlgycTcvrYf7509DOP

Jan 2019: Updated for RxJS 6

这篇关于如何使用 rxjs 在 angular2 中实现输入 keyup 事件的去抖动服务的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！