RxJS操作符（三）

跟时间相关的过滤

RxJS操作符（三）

debounceTime自动完成：性能，避免每次请求都往出发

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value').debounceTime(300);

debounce中间传入Observable

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value').debounce(()=>{
Rx.Observable.interval(300)
});

时间可以是动态的，不是固定的300。

二、过滤类操作符distinct,distinctUntilChanged

distinct:只留不一样的【跟整个序列比】类似面向对象语言中的set。

整个序列中没有重复元素。

event是无尽序列，如果是对整个序列做监控，内存会越消耗越多。【隐患】

RxJS操作符（三）

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value').distinct();

distinctUntilChanged:只跟前一个元素比

RxJS操作符（三）

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value').distinctUntilChanged();

三、合并类操作符merge, concat, startWith

1、merged

RxJS操作符（三）

merged:会交替输出两个值输出。把两个流按各自的顺序叠加成一个流。每个流的时间点在新流中都不会变。

console.log('RxJS included?', !!Rx);

const length=document.getElementById("length");
const width=document.getElementById("width");
const area=document.getElementById("area");

const length$ =Rx.Observable.fromEvent(length,'keyup').pluck('target','value');
const width$ =Rx.Observable.fromEvent(width,'keyup').pluck('target','value');

const merged$=Rx.Observable.merge(length$,width$);

merged$.subscribe(val=>{console.log(val);area.innerHTML=val})

View Code