[JavaScript知识库]2021-11-08

Rxjs概述

Angular中集成了Rxjs库，Rxjs是javascript的一个响应式编程库，它提供了很多api，可以很方便的处理和操作应用中的数据。

Rxjs的内容可以概括为一个核心三个重点，核心就是Observable和Operators，三个重点分别是：

• observer 回调函数的集合，它知道如何去处理observable上产生的值或者事件，包括异常
• Subject 相当于一个事件发射器，允许将相同的值传递给多个订阅者
• schedulers 协调observable上数据的发射方式

简单的例子

下边用一个简单的例子来展示下Rxjs如何工作

var observable = Observable
    .create(function(observer) {
        observer.next('Suzuki'); 
        observer.next('Honda');
        observer.next('Kawasaki');
    })

console.log('start');
// 订阅 observable    
observable.subscribe(function(value) {
    console.log(value);
})
console.log('end');

结果为：

start
Suzuki
Honda
Kawasaki
end

通过Observable身上的create方法可以创建一个Observable，参数中的回调函数设置这个Observable将会传递值，然后通过subscribe订阅这个Observable。

Rxjs的operators

operarors是Rxjs的关键，大致分为8类：

选择器类：take first last takeLast
创建observable类：create of from fromEvent fromPromise never empty throw interbal timer
控制数据流类： takeUntil skip startWith concat merge delay delaywhen throttle debounce distinct distinctUntilChanged
错误处理：catch retry retryWhen
操作数据：scan repeat
协调多个observable：combineLatest withLatestFrom zip switchMap mergeMap concatMap
改变数据流结构：concatAll mergeAll
缓存类：buffer window windowToggle

这里只讲两个接下来要用到的控制数据流类 debounce（防抖）和throttle （节流）

什么是防抖（debounce）？

触发高频事件后 n 秒内函数只会执行一次，如果 n 秒内高频事件再次被触发，则重新计算时间；

什么是节流（throttle）？

高频事件触发，但在 n 秒内只会执行一次，所以节流会稀释函数的执行频率。

debounceTime

debounce 在每次收到元素，他会先把元素 cache 住并等待一段时间，如果這段时间內已经沒有收到任何元素，则把元素送出；如果这段时间內又收到新的元素，则会把原本 cache 住的元素释放掉并重新计时，不断反复。

var example = interval(300).pipe(take(5),debounceTime(1000));// take(5)表示执行五次（0-4）

example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 4  
// complete

throttleTime

跟 debounce 的不同是 throttle 会先开放送出元素，等到有元素被送出就会沉默一段時间，等到时间过了又会继续发送元素,防止某个事件频繁触发，影响效率。

var example = interval(300).pipe(take(5),throttleTime(1000)); 
example.subscribe({
    next: (value) => { console.log(value); },
    error: (err) => { console.log('Error: ' + err); },
    complete: () => { console.log('complete'); }
});
// 0
// 4
// complete

对输入框进行防抖/节流处理

防抖:<input type="text" id="debounce"/><br/>
节流:<input type="text" id="throttle"/>

<script>
    var $debounce = document.getElementById('debounce');
    var $throttle = document.getElementById('throttle');
    const debounce$ = Rx.Observable.fromEvent($debounce, 'input');
    const throttle = Rx.Observable.fromEvent($throttle, 'input');
    // 节流
    debounce$
        .debounceTime(1000)
        .subscribe(function (e) {
            var value = e.target.value;
            console.log('防抖:'+value)
        });
    // 防抖
    throttle
        .throttleTime(1000)
        .subscribe(function (e) {
            var value = e.target.value;
            console.log('节流:'+value)
        });
</script>