Angular 基础篇——Rxjs之一：audit和auditTime，take和takeUntil

关于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事件来终止主数据源