Scheduler.animationFrame과 fromEvent(윈도우, 'scroll') 스트림을 rxj로 어떻게 결합하시겠습니까?

Scheduler.animationFrame과 fromEvent(윈도우, 'scroll') 스트림을 rxj로 어떻게 결합하시겠습니까?

나는 두개의 관찰력이 있다.Observable.of(0, animationFrame)&Observable.fromEvent(window, 'scroll')나는 그것들을 결합해서 나의 것.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++));
}

스크롤 이벤트를 조절하여 AnimationFrame을 요청하려면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))

zip 스크롤 이벤트가 프레임 속도보다 빠르게 방출될 때 스크롤 핸들러는 실제 스크롤 값보다 뒤처지는 심각한 결함은 잠재적으로 심각한 결함을 가지고 있는 빠르고 더러운 솔루션이다.그것은 다음과 같은 것처럼 보일 것이다.

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

필요하면event최신 스크롤 정보를 포함하려면 다음과 같이 운영자와 함께 보다 정교한 솔루션을 사용해야 할 수 있다.

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관측 가능 인수가 항목을 방출할 때마다 청크로 채워지는 관측 가능한 청크 스트림을 소스로부터 생성한다.이 경우 일련의 스크롤 이벤트가 각 애니메이션 틱에 의해 청크 처리된다.
2. 청크가 비어 있지 않으면 각 청크에서 최신 정보만 가져가고mergeMap평탄한 출력 스트림까지.빈 덩어리는 이 마지막 스트림에 어떤 항목도 기여하지 못할 것이다.

interval(0)
  .pipe(throttleTime(0, animationFrameScheduler))
  .subscribe(() => {
    fifth++;
  });

scheduled(interval(0), animationFrameScheduler).subscribe(() => {
  sixth++;
});

1, 2 또는 100초 동안 시간을 설정해도 그 둘은 단지 1프레임만 부족한 것 같다;)

REAL:  181
FIRST:  109
SECOND:  217
THIRD:  108
FOURTH:  217
FIFTH:  180

참조URL: https://stackoverflow.com/questions/46621557/how-do-would-you-combine-scheduler-animationframe-and-fromeventwindow-scroll