正确设置油门时间（）运算符

Question

我有一个按钮，其点击事件处理程序设置为一个函数：<button (click)="someFunction(test1)">get stuff</button>

someFunction()会做一些事情，但是会调用一个执行http get的服务函数。

 this._myService.getDetails(username).pipe(
      throttleTime(10000)
).subscribe()

为我服务：

  getDetails(username: string) {
    return this._http.get(url);
  }

这显然是行不通的，因为每次我单击按钮都会发出新的http get呼叫。

设置类似于节流时间（）的功能的好方法是什么，其中在一定的超时时间后发出http get调用？

Answer 1

您要寻找的是debounceTime运算符。

  

debounceTime延迟了源Observable发出的值，但下降了   如果新值到达了先前的未决延迟排放   来源可观察。该运算符跟踪最新值   从源Observable发出，仅在DueTime足够时才发出   时间过去了，但源上未出现任何其他值   可观察的。如果在DueTime静音发生之前出现新值，则   先前的值将被删除，并且不会在输出中发出   可观察的。

请参见示例here。

RxJS的官方文档为here。

Answer 2

您确实需要throttleTime（请参见下面的比较大理石图）

但目前您正在限制响应流，相反，您需要限制按钮点击流。

为此，我们可以通过单击按钮创建流：

<button (click)="someFunction(test1)">get stuff</button>

class Component {
  btnClickSubject$ = new Subject<void>();
  someFunction(){
    this.btnClickSubject$.next(void 0);
  }
}

然后*Map将其发送到http-get请求：

class Component {
  //...

  destroy$ = new Subject<void>();

  ngOnInit() {
    this.btnClickSubject$.pipe(
      // throttle clicks
      throttleTime(3000),

      // switchMap or other *Map operator to switch to http-get
      switchMap(() => this._http.get('url')),

      // complete with component destroy *
      takeUntil(this.destroy$)
    )
    .subscribe(response => console.log(response))
  }


  ngOnDestroy() {
    this.destroy$.next(void 0);
  }

}

*请注意，我们需要明确告知此订阅以组件“ onDestroy”完成

-

以下是 debounceTime vs throttleTime vs auditTime vs sampleTime

的比较

希望这会有所帮助