@crikey/stores-temporal

Provides time-based store transformations such as debounce and throttle.

API

Store creation functions:

debounce - only signal store change after a specified amount of inactivity
throttle - rate limit store updates

Installation

# pnpm
$ pnpm add @crikey/stores-temporal

# npm
$ npm add @crikey/stores-temporal

# yarn
$ yarn add @crikey/stores-temporal

Index

Functions

debounce

debounce<T>(store: Readable, delay_ms: number): Readable

Debounce changes from store.

Changes from store will be delayed by delay_ms. Fresh changes from store will cancel any pending events, effectively discarding any changes with a higher frequency than delay_ms.

debounce

   +---+     +---+     +---+          +---+     +---+     +---+
   |   |     |   |     |   |          |   |     |   |     |   |
+--+ 1 +-----+ 2 +-----+ 3 +----------+ 4 +-----+ 5 +-----+ 6 +-------------->
   |   |     |   |     |   |          |   |     |   |     |   |
   +---+     +---+     +---+          +---+     +---+     +---+
                         |                                  |
                         +-----------+                      +-----------+
                                     |                                  |
                                     v                                  v
                                   +---+                              +---+
                                   |   |                              |   |
+----------------------------------+ 3 +------------------------------+ 6 +-->
                                   |   |                              |   |
                                   +---+                              +---+

Example:

From ./packages/stores-temporal/examples/debounce.test.ts#9~53


    const store = writable(trigger_strict_not_equal, 1);

    const debounced = debounce(store, 50);

    debounced.subscribe(value => console.log(value));

    await new Promise(resolve => {
        setTimeout(resolve, 30);
    });
    store.set(2);
    await new Promise(resolve => {
        setTimeout(resolve, 30);
    });
    store.set(3);
    await new Promise(resolve => {
        setTimeout(resolve, 30);
    });
    store.set(4);

    await new Promise(resolve => {
        setTimeout(resolve, 100);
    });
    store.set(5);
    await new Promise(resolve => {
        setTimeout(resolve, 30);
    });
    store.set(6);
    await new Promise(resolve => {
        setTimeout(resolve, 30);
    });
    store.set(7);
    await new Promise(resolve => {
        setTimeout(resolve, 30);
    });
    store.set(8);
    await new Promise(resolve => {
        setTimeout(resolve, 100);
    });

    // > 1
    // > 4
    // > 8

Type parameters

Parameters

store: Readable

store to debounce
delay_ms: number

number of ms to delay changes by

Returns Readable

throttle

throttle<T>(store: Readable, period_ms: number): Readable

Throttle changes from store.

Changes from store beyond the frequency specified by period_ms will be discarded.

throttle

   +---+  +---+  +---+  +---+                 +---+  +---+  +---+  +---+
   |   |  |   |  |   |  |   |                 |   |  |   |  |   |  |   |
+--+ 1 +--+ 2 +--+ 3 +--+ 4 +-----------------+ 5 +--+ 6 +--+ 7 +--+ 8 +-------------->
   |   |  |   |  |   |  |   |                 |   |  |   |  |   |  |   |
   +---+  +---+  +---+  +---+                 +---+  +---+  +---+  +---+
     |      |             |                     |      |             |
     |      +-----+       +----+                |      +-----+       +----+
     |            |            |                |            |            |
     v            v            v                v            v            v
   +---+        +---+        +---+            +---+        +---+        +---+
   |   |        |   |        |   |            |   |        |   |        |   |
+--+ 1 +--------+ 2 +--------+ 4 +------------+ 5 +--------+ 6 +--------+ 8 +--------->
   |   |        |   |        |   |            |   |        |   |        |   |
   +---+        +---+        +---+            +---+        +---+        +---+

Example:

From ./packages/stores-temporal/examples/throttle.test.ts#9~42


    const wait = (ms: number) => new Promise(resolve => {
        setTimeout(resolve, ms);
    })

    const store = writable(trigger_strict_not_equal, 1);

    const throttled = throttle(store, 500);

    throttled.subscribe(value => console.log(value));

    await wait(10);
    store.set(2);
    await wait(10);
    store.set(3);
    await wait(10);
    store.set(4);

    await wait(500);
    store.set(5);
    await wait(200);
    store.set(6);
    await wait(200);
    store.set(7);
    await wait(200);
    store.set(8);
    await wait(600);

    // > 1
    // > 4
    // > 7
    // > 8

Type parameters

Parameters

store: Readable
period_ms: number

@crikey/stores-temporal

API

Store creation functions:

Installation

Index

Functions

Functions

debounce

Type parameters

T

Parameters

store: Readable

delay_ms: number

Returns Readable

throttle

Type parameters

T

Parameters

store: Readable

period_ms: number

Returns Readable