跟我学Rx编程——combineLatest简单案例

今天讲一个简单的例子

业务逻辑

1. 发起一个异步请求
2. 收到请求结果的时候如果不足2秒，则等待到2秒再播放动画
3. 如果超过2秒，则立即播放动画

假设有一个播放动画的函数play(data),并且用到了异步请求结果中的数据

这是一个游戏里面常用的逻辑，就是动画是用来填补等待时间，但不能由于异步太快结束后使得动画过早播放。也就是说需要营造一种花时间完成的错觉。但异步时间是不好确定的，可能异步会消耗很多时间，这时候又需要真实反映异步所花费的时间。

常规写法

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写法

我们需要创建一个requestOb，这个就省略了 我们还需要一个timeout 的Observable，也可以用interval代替，当然自己创建一个也非常简单

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先到达数据都不会立即发出组合事件对象，只有双方都到达的时候才会将一个结果数组发送出来

本次案例中的两个Observable都只会发出一个事件就会结束，combineLatest也可以用于发出多个事件的事件流的组合，每次都会在新的事件到达的时候，将所有Observable中最新的事件组合在一起。可以说combineLatest是一个非常有用的组合Observable的利器。