RxJS 中的 throttleTime 与 debounceTime 之间有什么区别以及何时选择哪个？

Question

我想了解 throttleTime 与 debounceTime 以及何时使用哪个？

我有一个投票按钮，可以向后端发出 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 中直观地看到这一点

此外，throttleTime vs debounceTime in RxJS 文章很好地概述了这两个运算符。

Answer 2

（更简单的回答）

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

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

Debounce time =可以在每个请求通过之前添加一个延迟（你按下按钮然后1秒没有任何反应，然后你的请求通过了）

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

Answer 3

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

不过，我想根据您的具体情况为您提供一个略有不同的选项，即 exhaustMap。 exhaustMap 是一个运算符，如果前一个 Observable 尚未完成，它会忽略每个新的投影 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!'))

RxJS 中的 throttleTime 与 debounceTime 之间有什么区别以及何时选择哪个？

What is the difference between throttleTime vs debounceTime in RxJS and when to choose which?

observable

rxjs

rxjs-pipeable-operators