Comment combinez-vous Scheduler.animationFrame et fromEvent (fenêtre, 'scroll') dans rxjs?

Question

J'ai deux observables Observable.of(0, animationFrame) & Observable.fromEvent(window, 'scroll'). Je veux les combiner pour que mon renderScrollBar(event) ne soit appelé que sur les ticks d'animationFrame.

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

Si vous voulez accélérateur événement de défilement pour requestAnimationFrame vous pouvez utiliser throttleTime(0, animationFrame) opérateur au lieu de Observable.of(0, animationFrame).

Exemple

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

Answer 2

zip est une solution rapide et sale qui a un défaut potentiellement grave: le gestionnaire de défilement est en retard sur la valeur réelle de défilement lorsque des événements de défilement émettent plus vite que la vitesse de défilement. Il ressemblerait à quelque chose comme:

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

Si vous avez besoin event pour contenir les dernières informations de défilement, vous pourriez avoir besoin de recourir à une solution plus élaborée avec the window operator, comme:

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. Foremost , window crée un flux de morceaux Observable à partir de la source, fragmenté chaque fois que l'argument Observable émet un élément. Dans ce cas, des séries d'événements de défilement sont tronquées par chaque tique d'animation.
2. Nous prenons seulement les plus récents de chaque morceau si le morceau n'est pas vide, et mergeMap cela à un flux de sortie plat. Les morceaux vides ne contribueront aucun élément à ce dernier flux.