ThrottleTime 操作员的配置参数如何工作?(油门配置) [英] How does throttleTime operator's config parameter work? (ThrottleConfig)

问题描述

我已经阅读了 throttleTime 文档，但我不明白完全操作符.

I have read the throttleTime documentation, but I don't get the operator fully.

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

I know how throttleTime(1000) works. After an event arrives it will skip all subsequent events for 1 second and then start this process again.

我难以理解的是 ThrottleConfig 究竟是如何工作的，它是操作符的第三个参数.

What I have trouble to understand is how exactly ThrottleConfig works, which is the third parameter of the operator.

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

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

How do leading and trailing properties change the functionality of the source Observable?

我已经阅读了很多文档，但他们没有清楚地解释这一点.

I have read many documentations but they don't clearly explain this.

所以有四个选项:

1. { 前导:真，尾随:假 }:
   默认选项，接收事件后跳过指定持续时间的其他事件，然后重复.
2. { 前导:假，尾随:真}:
   ???
3. { 前导:假，尾随:假}:
   对此进行了测试，Observable 根本不发出任何内容.
4. { 前导:真，尾随:真 }:
   ???

推荐答案

throttleTime 将开始一个新的throttle interval(一个不会发出任何项目的时间段)当它收到一个新值并且还没有被限制时.此节流间隔的长度取决于您提供的持续时间.

throttleTime will start a new throttle interval (a time period in which no items will be emitted) when it receives a new value and isn't already throttled. The length of this throttle interval is determined by the duration you supply.

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

With RxJS 7 a new throttle interval is also started when a trailing value is emitted at the end of a throttle interval.

leading 和 trailing 指定是在节流间隔的开始还是结束时发出项目.

leading and trailing specify whether an item should be emitted at the beginning or end of a throttle interval.

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

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

trailing: Emit the last item received from the source at the end of a throttle interval.

RxJS 6 &7 - 尾随:假

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----

这篇关于ThrottleTime 操作员的配置参数如何工作?(油门配置)的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！