Watch Animation Frame

This is a watcher factory, which creates (conditional) event listeners and listens by every tick of an animation frame and possibly fires the provided callbacks.

Examples

Create Watchers

// create a watcher listening for vertical scrolling/pageYOffset
window.__scrollWatcher__ =
  window.__scrollWatcher__ || new Watcher(() => window.pageYOffset);

// create a watcher listening for changes of horizontal document width
window.__dimensionWatcher__ =
  window.__dimensionWatcher__ || new Watcher(() => window.innerWidth);

Subscribe to Watchers

// subscribe scroll watcher
const subscriptionId = window.__scrollWatcher__.subscribe({
  onchange(currentValue) {
    // gets triggered with every value change
    console.log(`Scrolled to ${currentValue}`);
  },
});

The most simple subscription is one with the option onchange

List of subscription options

| option | type | description | | ---------------- | ------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | namespace | string (optional) | Can group subscriptions under one namespace. Helps to unsubscribe multiple subscriptions at once. | | matchCondition | function (optional) | Gives back true or false and is the controller for onappear, ondisappear, onmatch, ondismatch, onmatchchange | | onchange | function (optional) | Will be triggered with every tick if the value (calculated by the value function given at the watcher construction). Can be used for custom event logic. | | onappear | function (optional) | Will be executed if the condition is fullfilled (true) and wasn’t before (the last tick). Requires matchCondition. a | | ondisappear | function (optional) | Will be executed if the condition is not fullfilled (false), but was before (the last tick). Requires matchConditioa n. | | onmatch | function (optional) | Will be executed every tick the condition is fullfilled (true). Requires matchCondition. a | | ondismatch | function (optional) | Will be executed every tick the condition is not fullfilled (false). Requires matchCondition. a | | onmatchchange | function (optional) | Will be executed if condition was true and is false now or was false and is true now (on every onappear and ondisappear). Requires a matchCondition. |