RxJS - 按分區分割並使用iterval發射

Question

如何使用RxJS實現類似以下內容的操作？

ABCDEFGH

AB CD --- --- --- EF GH

或

ABCDEFGH

ABC ---- ----高清GH

我有一個數組，我需要按指定的分區分割並以指定的時間間隔發射值。

Answer 1

注意你不能從 'AB-' ab--'，因爲你必須等待 'B'，所以嚴格的大理石圖將

a-b-c-d-e-f-g-h-| 
-(ab)---(cd)---(ef)---(gh|) 

or 

a-b-c-d-e-f-g-h-| 
--(abc)----(def)----(gh|) 

console.clear() 
 
const Observable = Rx.Observable 
 

 
const timedEmitter = (observable, interval) => 
 
    Observable.zip(observable, Observable.timer(0, interval)) 
 
    .map(x => x[0]) 
 

 
const source = Observable.from(['a','b','c','d','e','f','g','h']) 
 
const timedSource = timedEmitter(source, 1000) 
 

 
const interval = 5000 
 
const size = 3 
 
const output = timedEmitter(timedSource.bufferCount(size), interval) 
 

 
//Display 
 
const start = new Date() 
 
output.timestamp() 
 
    .map(x => { return {value: x.value, elapsed: x.timestamp - start} }) 
 
    .subscribe(console.log)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>

腳註，在timedEmitter中將Observable.interval(interval)更改爲Observable.timer(0, interval)以首先發射。

腳註＃2，這是不完全正確的，因爲源的complete()縮短了最後的時間間隔。
這只是所選間隔的人工產物。

---

下面是使用pipe()從RxJs 5.5運營商定製版本，裁判Build your own operators easily

console.clear() 
 
const Observable = Rx.Observable 
 

 
const timedEmitter = (observable, interval) => 
 
    Observable.zip(observable, Observable.timer(0, interval)) 
 
    .map(x => x[0]) 
 

 
const source = Observable.from(['a','b','c','d','e','f','g','h']) 
 
const timedSource = timedEmitter(source, 1000) 
 

 
// Custom operator 
 
const timedBufferedEmitter = (interval, bufferSize) => (observable) => 
 
    Observable.zip(observable.bufferCount(bufferSize), Observable.timer(0, interval)) 
 
    .map(x => x[0]) 
 

 
const interval = 5000 
 
const size = 3 
 
const output = timedSource.pipe(timedBufferedEmitter(interval, size)) 
 

 
//Display 
 
const start = new Date() 
 
output.timestamp() 
 
    .map(x => { return {value: x.value, elapsed: x.timestamp - start} }) 
 
    .subscribe(console.log)

<script src="https://cdnjs.cloudflare.com/ajax/libs/rxjs/5.5.2/Rx.js"></script>