javascript / expert
Snippet
Optimierung von Observable-Streams mit benutzerdefinierten AnimationFrameSchedulern
Die Verwendung des animationFrameScheduler mit observeOn stellt sicher, dass das Observable Werte genau dann ausgibt, wenn der Browser bereit ist, den nächsten Frame zu zeichnen. Dies verhindert Ruckeln bei hochfrequenten Ereignissen wie Scrollen durch Synchronisation mit der Bildwiederholfrequenz.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
import { animationFrameScheduler, observeOn } from 'rxjs';@Component({ ... })export class ScrollMonitor {private scroll$ = fromEvent(window, 'scroll').pipe(observeOn(animationFrameScheduler));constructor() {this.scroll$.subscribe(() => this.updateParallax());}}
angular
Erklärung
1
fromEvent(window, 'scroll')
Erstellt einen Stream aus einem hochfrequenten Browser-Event.
2
observeOn(animationFrameScheduler)
Verzögert die Benachrichtigung über Emissionen bis zum nächsten requestAnimationFrame-Zyklus.
3
this.updateParallax()
Die hier ausgeführte Logik wird nun natürlich durch die Display-Wiederholrate gedrosselt.