RxJS — (startWith、throttle、throttleTime)


碎碎念：知识点梳理归纳，如果有什么不对的感谢大家指正一起学习！

  • 版本为6

  • ① startWith
  • ② throttle
  • ③ throttleTime

① startWith

  • 返回的 Observable 会先发出作为参数指定的项，然后再发出由源 Observable 所发出的项
  • 发出给定的第一个值
  • 实例操作符

例：在源Observable发出值之前插入一个“s”
在这里插入图片描述
例 2: startWith 用作 scan 的初始值
在这里插入图片描述
解析：以S开头，后面接当前字符串

例3: 利用concat实现startWith效果
在这里插入图片描述

② throttle

  • 从源 Observable 中发出一个值，然后在由另一个 Observable 决定的期间内忽略随后发出的源值，然后重复此过程
  • 它很像 throttleTime，但是沉默持续时间是由 第二个 Observable 决定的
  • 函数签名: throttle(durationSelector: function(value): Observable | Promise): Observable

工作方式： throttle每次往下游传递一个数据，就关上了上下游之间的阀门，当durationSelector产生数据的时候才会打开这个阀门。这个时候如果有新数据产生，被传递给下游，同时关上阀门。throttle会退订上一次durationSelector返回的Observable对象，重新用**‘新数据’**作为参数来调用durationSelector来获得一个新的Observable对象，新的Observable对象产生数据的时候，阀门才会再次打开

弹珠图：
在这里插入图片描述

例1：节流4秒，时间由第二个Observable决定的

节流前：
在这里插入图片描述
节流后：
在这里插入图片描述
解析：在源产生第一个数据0的时候，用0最为参数调用durationSelector，订阅durationSelector返回的Observable对象，在这个Observable对象产生第一个对象之前，所有上游传过来的数据都会被抛弃，所以1,2,3,4被丢弃了，因为durationSelector返回的Observable对象被订阅之后4s后才会产生数据

例2：
在这里插入图片描述

③ throttleTime

  • 从源 Observable 中发出一个值，然后在 duration 毫秒内忽略随后发出的源值， 然后重复此过程
  • 让第一个值通过，之后发射的频率受duration影响，每次发射之后的duration时间之内不会发射出来新的数据

弹珠图：
在这里插入图片描述

例1：节流2s，每2s发出一个值
在这里插入图片描述

相关链接：
throttleTime