Timing
Reactive timeouts, intervals, debounced and throttled signals, and previous values.
Time-based signal helpers. Each one stops its timer when its scope is disposed.
createTimeout
Reactive setTimeout wrapper. Fires callback once after delay ms. Starts immediately unless immediate is false.
import { createTimeout } from "elements-kit/utilities/timeout";
const { pending, stop, reset } = createTimeout(() => {
console.log("fired");
}, 1000);function createTimeout(
callback: () => void,
delay: number | (() => number),
immediate?: boolean,
): { pending: Computed<boolean>; start(): void; stop(): void; reset(): void } & DisposablecreateInterval
Pausable setInterval wrapper. Starts running immediately on creation.
import { createInterval } from "elements-kit/utilities/interval";
const { pending, stop } = createInterval(() => {
console.log("tick");
}, 1000);
stop(); // pausefunction createInterval(
callback: () => void,
delay: number | (() => number),
): { pending: Computed<boolean>; start(): void; stop(): void; reset(): void } & DisposablecreateDebounced
Returns a Computed<T> that mirrors getter but only updates after delay ms of silence.
import { } from "elements-kit/utilities/debounced";
import { } from "elements-kit/signals";
const = ("");
const = (, 300);
effect(() => .(())); // fires 300ms after input stops changingfunction createDebounced<T>(getter: () => T, delay: number | (() => number)): Computed<T>createThrottled
Returns a Computed<T> that mirrors getter but updates at most once per interval ms. A trailing-edge update ensures the final value is never dropped.
import { createThrottled } from "elements-kit/utilities/throttled";
const throttledScroll = createThrottled(() => window.scrollY, 100);function createThrottled<T>(getter: () => T, interval: number): Computed<T>createPrevious
Returns a Computed that always holds the previous value of source. Starts as undefined until the source changes for the first time.
import { createPrevious } from "elements-kit/utilities/previous";
import { signal } from "elements-kit/signals";
const count = signal(0);
const prev = createPrevious(count);
count(1);
effect(() => console.log(prev())); // 0Pass ignore to skip updates when a condition is met:
// Only track previous when value actually changes
const prev = createPrevious(count, (a, b) => a === b);function createPrevious<T>(
source: Computed<T>,
ignore?: (next: T, current: T) => boolean,
): Computed<T | undefined>