关于rxjs
RxJS 是一个库,它通过使用 observable 序列来编写异步和基于事件的程序。
可以把 RxJS 当做是用来处理事件的 Lodash 。
audit和auditTime
audit auditTime 都可用于数据节流,差异在于audit 在由另一个 Observable 确定的持续时间内忽略源值
audit
使用方法:audit(v => interval(1000))
作用:在由另一个 Observable 确定的持续时间内忽略源值,然后从源 Observable 发出最新值,然后重复此过程
原理图
range(1,3000)
.pipe(v=>interval(1000))
.pipe(audit(v=>interval(3000)))
.subscribe(x=>console.log(new Date(), x))
效果图
auditTime
使用方法 auditTime(number)
作用: 忽略源值duration毫秒,然后从源 Observable 发出最新值,然后重复此过程。
原理图
range(1,3000)
.pipe(v=>interval(1000))
.pipe(auditTime(3000))
.subscribe(x=>console.log(new Date(), x))
效果图
take和takeUntil
take 用来获取数据流中的前几位数据;
takeUntil 通过事件来触发,终止主数据源;
take
使用方法:take(number)
作用: 获取数据流中的前几位
原理图:
import { take } from 'rxjs/operators';
import { range } from 'rxjs';
range(1, 10)
.subscribe(console.log)//1,2,3,4,5,.....,10
range(1,10)
.pipe(take(5))
.subscribe(console.log)//1,2,3,4,5
效果图
takeUntil
使用方法:takeUntil(event)
作用: 接收可观察对象,可观察对象发出值时,终止主数据源
原理图:
import { takeUntil } from 'rxjs/operators';
import { fromEvent } from 'rxjs';
fromEvent(document, 'mousemove')
.pipe(takeUntil(fromEvent(document, 'click')))
.subscribe(console.log);
效果图
没有使用takeUntil时会一直触发鼠标的mousemove
使用takeUntil之后通过click事件来终止主数据源