📄 animationFrameScheduler example

#angular #rxjs #animationFrameScheduler

animationFrameScheduler is tailored for tasks that require synchronization with the browser's animation frame. It schedules tasks to be executed just before the next animation frame, ensuring smooth animations and minimizing unnecessary computations. For instance, we can utilize the animationFrameScheduler to update the UI based on animation frames, creating a visually pleasing and responsive user interface.

The scrollPosition$ observable captures the scroll position of the window on each scroll event. The animationFrameScheduler is used to ensure that the scroll position updates and smooth scrolling effect occur right before each animation frame, providing a visually smooth scrolling experience. When the user clicks the "scroll to top" button, the scrollPosition$ observable is subscribed to, and the window is scrolled smoothly towards the top in increments of 10 pixels until the scroll position reaches 0.

✅ Article Link: https://priyank-bhardwaj.medium.com/reactive-ninja-harnessing-rxjs-for-angular-mastery-part-2-7091aac29d60

📄 Custom Operators in RxJS

#angular #rxjs

✅ Article Link: https://medium.com/@navneetsingh_95791/custom-operators-in-rxjs-for-angular-applications-building-and-utilizing-your-own-operators-b5c281f979a1

📄 Custom RxJS operators 1/7: "Сache operator"

#angular #rxjs #cache

Often an RxJS stream represents an http request — a stream that emits a single value and completes. Performance-wise, it is a good practice to cache a response from a server for a certain amount of time. The built-in share operator can be configured to provide a caching mechanism with a Time To Live (TTL) for a response.

operator

import { ... } from 'rxjs';

function cache<T>(ttl: number = Infinity): MonoTypeOperatorFunction<T> {
  return share({
    connector: () => new ReplaySubject(1),
    resetOnComplete: () => timer(ttl),
  });
}