javascript - throttleTime 运算符的配置参数如何工作？ ( throttle 配置)

Question

我已阅读 throttleTime documentation ，但我没有完全了解运算符。

我知道 throttleTime(1000) 是如何工作的。事件到达后，它将跳过所有后续事件 1 秒，然后再次开始此过程。

我很难理解的是 ThrottleConfig 究竟是如何工作的，这是运算符的第三个参数。

throttleTime<T>(
  duration: number, 
  scheduler: SchedulerLike = async, 
  config: ThrottleConfig = defaultThrottleConfig): MonoTypeOperatorFunction<T>

leading 和 trailing 属性如何改变源 Observable 的功能？

我看过很多文档，但他们并没有清楚地解释这一点。

所以有四种选择:

1. { leading: true, trailing: false }:
   默认选项，在接收事件后跳过指定持续时间的其他事件，然后重复。
2. { leading: false, trailing: true }:
   ???
3. { leading: false, trailing: false }:
   对此进行了测试，Observable 根本不发出任何东西。
4. { leading: true, trailing: true }:
   ???

Answer 1

throttleTime 将在收到新值且尚未受到限制时开始一个新的节流间隔(一个不会发出任何项目的时间段)。此限制间隔的长度由您提供的持续时间决定。

在 RxJS 7 中，当在 节流间隔 结束时发出尾随值时，也会启动一个新的节流间隔。

leading 和 trailing 指定项目是应该在 throttle 间隔的开始还是结束 发出。

leading:在新的节流间隔开始时发射一个项目。

trailing:在 节流间隔 结束时发出从源接收到的最后一个项目。

可视化

RxJS 6 & 7 - trailing: false

throttleTime(12 ticks, { leading: true, trailing: false })

source_1:           --0--1-----2--3----4--5-6---7------------8-------9---------
throttle interval:  --[~~~~~~~~~~~]----[~~~~~~~~~~~]---------[~~~~~~~~~~~]-----
output_1:           --0----------------4---------------------8-----------------


source_2:           --0--------1------------------2--------------3---4---------
throttle interval:  --[~~~~~~~~~~~]---------------[~~~~~~~~~~~]--[~~~~~~~~~~~]-
output_2:           --0---------------------------2--------------3-------------

throttleTime(12 ticks, { leading: false, trailing: false })

source_1:           --0--1-----2--3----4--5-6---7------------8-------9---------
throttle interval:  --[~~~~~~~~~~~]----[~~~~~~~~~~~]---------[~~~~~~~~~~~]-----
output_1:           -----------------------------------------------------------


source_2:           --0--------1------------------2--------------3---4---------
throttle interval:  --[~~~~~~~~~~~]---------------[~~~~~~~~~~~]--[~~~~~~~~~~~]-
output_2:           -----------------------------------------------------------

RxJS 6 - trailing: true

throttleTime(12 ticks, { leading: true, trailing: true })

source_1:           --0--1-----2--3----4--5-6---7------------8-------9---------
throttle interval:  --[~~~~~~~~~~~]----[~~~~~~~~~~~]---------[~~~~~~~~~~~]-----
output_1:           --0-----------3----4-----------7---------8-----------9-----


source_2:           --0--------1------------------2--------------3---4---------
throttle interval:  --[~~~~~~~~~~~]---------------[~~~~~~~~~~~]--[~~~~~~~~~~~]-
output_2:           --0-----------1---------------2--------------3-----------4-

throttleTime(12 ticks, { leading: false, trailing: true })

source_1:           --0--1-----2--3----4--5-6---7------------8-------9---------
throttle interval:  --[~~~~~~~~~~~]----[~~~~~~~~~~~]---------[~~~~~~~~~~~]-----
output_1:           --------------3----------------7---------------------9-----


source_2:           --0--------1------------------2--------------3---4---------
throttle interval:  --[~~~~~~~~~~~]---------------[~~~~~~~~~~~]--[~~~~~~~~~~~]-
output_2:           --------------1---------------------------2--------------4-

RxJS 7 - trailing: true

throttleTime(12 ticks, { leading: true, trailing: true })

source_1:           --0--1-----2--3----4--5-6---7------------8-------9---------
throttle interval:  --[~~~~~~~~~~~I~~~~~~~~~~~I~~~~~~~~~~~I~~~~~~~~~~~I~~~~~~~~
output:             --0-----------3-----------6-----------7-----------9--------


source_2:           --0--------1------------------2--------------3---4---------
throttle interval:  --[~~~~~~~~~~~I~~~~~~~~~~~]---[~~~~~~~~~~~]--[~~~~~~~~~~~I~
output_2:           --0-----------1---------------2--------------3-----------4-

throttleTime(12 ticks, { leading: false, trailing: true })

source_1:           --0--1-----2--3----4--5-6---7------------8-------9---------
throttle interval:  --[~~~~~~~~~~~I~~~~~~~~~~~I~~~~~~~~~~~I~~~~~~~~~~~I~~~~~~~~
output:             --------------3-----------6-----------7-----------9--------


source_2:           --0--------1------------------2--------------3---4---------
throttle interval:  --[~~~~~~~~~~~I~~~~~~~~~~~]---[~~~~~~~~~~~I~~~~~~~~~~~]----
output_2:           --------------1---------------------------2-----------4----