rxjs - RxJS 中的throttleTime 与 debounceTime 有什么区别，何时选择哪个？

Question

我试图了解throttleTimevsdebounceTime以及何时使用哪个？

我有一个投票按钮，它向后端（计算投票）发出 API 请求。用户可以多次提交按钮，但我想限制每秒可以按下按钮的次数。

我知道throttleTime，debounceTime运营商可以做到这一点，但我应该选择哪一个？

const upvoteClicks = fromEvent(this.el.nativeElement, 'click')
   .pipe(debounceTime(500))
   .subscribe(() => this.myService.postUpvote(this.postId));

Answer 1

我认为在您的情况下throttleTime效果更好一些，因为您希望在用户单击按钮后立即发出 api 请求。

两者都throttleTime忽略同时发生debounceTime的事件，但throttleTime立即发出，同时 debounceTime等待额外的延迟。

您可以在https://rxmarbles.com直观地看到这一点

更重要的是，RxJS文章中的 throttleTime 与 debounceTime 很好地概述了这两种运算符。

Answer 2

（一个更简单的答案）

假设用户单击触发请求的按钮（示例）：

节流时间= 可以限制点击次数，因此每秒只有 1 次通过（防止按钮垃圾邮件）

去抖时间= 可以在每个请求通过之前添加延迟（您按下按钮然后 1 秒内没有任何反应，然后您的请求通过）

1 秒只是一个例子。您可以在 debounceTime() 或 throttleTime() 中输入任何内容 - 以毫秒为单位

Answer 3

接受的答案清楚地指出了 和 之间的throttleTime区别debounceTime。

但是，我想在您的特定情况下为您提供一个稍微不同的选项，即exhaustMap. exhaustMap是一个运算符，如果前一个尚未完成，则忽略每个新的投影 Observable。因此，必须先完成对后端的第一个 API 请求，然后用户才能第二次执行它。如果 API 数据反弹非常缓慢，比您设置的固定时间慢，它会很有用，它不会触发任何进一步的 API 调用，直到前一个完成。 您可以在此处阅读有关排气映射的更多信息。

const upvoteClicks = fromEvent(this.el.nativeElement, 'click')
   .pipe(
      exhaustMap(() => this.myService.postUpvote(this.postId))
    )
   .subscribe(() => console.log('upvoted!'))