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 vs debounceTime提供了对这两个运算符的很好的概述。

Answer 2

（更简单的答案）

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

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

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

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