javascript - 如何在 rxjs 中组合 Scheduler.animationFrame 和 fromEvent(window, 'scroll' ) 流？

Question

我有两个可观察对象Observable.of(0,animationFrame)和Observable.fromEvent(window, 'scroll')。我想将它们组合起来，以便仅在animationFrame 的刻度上调用我的 renderScrollBar(event) 。

  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)

更新:

RxJS 6

import { fromEvent, animationFrameScheduler } from "rxjs";
import { throttleTime } from "rxjs/operators";

fromEvent(window, "scroll")
  .pipe(throttleTime(0, animationFrameScheduler))