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.