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

【问题标题】：What is the difference between throttleTime vs debounceTime in RxJS and when to choose which?RxJS 中的throttleTime 与 debounceTime 有什么区别，何时选择哪个？
【发布时间】：2019-10-20 23:03:51
【问题描述】：

我正在尝试了解 throttleTime 与 debounceTime 以及何时使用哪个？

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

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

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

【问题讨论】：

标签： rxjs observable rxjs-pipeable-operators

【解决方案1】：

接受的答案已经明确指出throttleTime和debounceTime之间的区别。

但是，我想在您的特定情况下为您提供一个稍微不同的选项，即exhaustMap。 exhaustMap 是一个运算符，如果前一个尚未完成，则忽略每个新的预计 Observable。因此，必须先完成对后端的第一个 API 请求，然后用户才能第二次执行它。如果 API 数据反弹非常缓慢，比您设置的固定时间慢，它会很有用，它不会触发任何进一步的 API 调用，直到前一个完成。 You can read more about exhaustMap here.

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

【讨论】：

【解决方案2】：

（更简单的答案）

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

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

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

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

【讨论】：

虽然这是正确的，但您只解释了“何时”而不是“什么”。在 OP 的示例中，按下按钮表示喜欢或投票。假设用户对第一个帖子进行了投票，然后立即改变了主意并投票给了第二个帖子/人/任何东西。使用 throttleTime 可以为帖子 1 注册一个赞，使用 debounceTime 可以为帖子 2 注册一个赞。这两种实现都不优于另一种，但请记住这是一个重要的区别。

【解决方案3】：

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

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

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

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

【讨论】：