今天講一個簡單的例子
業(yè)務邏輯
- 發(fā)起一個異步請求
- 收到請求結果的時候如果不足2秒，則等待到2秒再播放動畫
- 如果超過2秒，則立即播放動畫
假設有一個播放動畫的函數play(data),并且用到了異步請求結果中的數據
這是一個游戲里面常用的邏輯，就是動畫是用來填補等待時間，但不能由于異步太快結束后使得動畫過早播放。也就是說需要營造一種花時間完成的錯覺。但異步時間是不好確定的，可能異步會消耗很多時間，這時候又需要真實反映異步所花費的時間。
常規(guī)寫法
let requestDone = false
let timeoutDone = false
let requestData = null
setTimeout(function(){
if(requestDone)play(requestData)
else timeoutDone = true
},2000)
request('http://xxx',function(data){
requestData = data
if(timeoutDone )play(data)
else requestDone = true
})
本質上，這種邏輯就是互相等待的過程，是十分常見的。
Rx寫法
我們需要創(chuàng)建一個requestOb，這個就省略了
我們還需要一個timeout 的Observable，也可以用interval代替，當然自己創(chuàng)建一個也非常簡單
const timeout = period => Observable.create(observer=>setTimeout(() => {
observer.next(0)
observer.complete()
}, period))
現在就可以用combineLatest將兩個Observable進行組合
combineLatest(requestOb,timeout(2000)).subscribe(x=>play(x[0]))
如果使用interval的話:
combineLatest(requestOb,interval(2000).pipe(take(1))).subscribe(x=>play(x[0]))
任何一個Observable先到達數據都不會立即發(fā)出組合事件對象，只有雙方都到達的時候才會將一個結果數組發(fā)送出來
本次案例中的兩個Observable都只會發(fā)出一個事件就會結束，combineLatest也可以用于發(fā)出多個事件的事件流的組合，每次都會在新的事件到達的時候，將所有Observable中最新的事件組合在一起?？梢哉fcombineLatest是一個非常有用的組合Observable的利器。
