如何将rrjjs中的Scheduler.animationFrame和fromEvent（window，'scroll'）流结合起来？

Question

我有两个观察对象Observable.of(0, animationFrame) & Observable.fromEvent(window, 'scroll')。我想合并它们，这样我的renderScrollBar(event)只在animationFrame的tick上被调用。

Observable.fromEvent(window, 'scroll') 
     .map((event: any) => event.currentTarget) 
     .subscribe((event) => { 
     this._renderScrollBar(event); 
     }); 
    let x = 0; 
    Observable.of(0, animationFrame) 
     .repeat() 
     .takeUntil(Observable.timer(1000)) 
     .subscribe(() => console.log(x++)); 
} 

Answer 1

如果要将滚动事件调整为requestAnimationFrame，则可以使用throttleTime(0, animationFrame)运算符而不是Observable.of(0, animationFrame)。

例

Observable.fromEvent(window, 'scroll') 
    .throttleTime(0, animationFrame) 

Answer 2

zip是一个快速和肮脏的解决方案，具有潜在的严重缺陷：真正的滚动值背后的滚动处理滞后滚动时发出的事件比帧速率更快。它看起来是这样的：

Observable.fromEvent(window, 'scroll') 
      .map(event => event.currentTarget) 
      .zip(Observable.of(0, animationFrame) 
         .repeat(), 
      (currentTarget, _) => this._renderScrollBar(currentTarget) 
     ); 

如果需要event包含了最新的滚动信息，你可能需要求助于更复杂的解决方案与the window operator，如：

Observable.fromEvent(window, 'scroll') 
      .map(event => event.currentTarget) 
      .window(Observable.of(0, animationFrame).repeat()) 
      .mergeMap(w => w.takeLast(1)) 
      .subscribe(currentTarget => this._renderScrollBar(currentTarget)); 

1. 至上，window从源创建一个Observable块，每次参数Observable发出一个项目时都会分块。在这种情况下，一系列滚动事件由每个动画片段分块。
2. 如果块不为空，我们只取每块的最新版本，并将mergeMap修改为平面输出流。空的块将不会贡献任何项目到这最后的流。