@solid-primitives/timer

@solid-primitives/timer

Timer primitives related to setInterval and setTimeout:

• makeTimer - Makes an automatically cleaned up timer.
• createTimer - makeTimer, but with a fully reactive delay
• createTimeoutLoop - Like createInterval, except the delay only updates between executions.
• createPolled - Polls a function periodically. Returns an to the latest polled value.
• createIntervalCounter - Creates a counter which increments periodically.

Installation

npm install @solid-primitives/timer
# or
yarn add @solid-primitives/timer

How to use it

Basic Usage

makeTimer

Makes a timer (setTimeout or setInterval), automatically cleaning up when the current reactive scope is disposed.

const callback = () => {};
const disposeTimeout = makeTimer(callback, 1000, setTimeout);
const disposeInterval = makeTimer(callback, 1000, setInterval);
// ...
dispose(); // clean up manually if needed

createTimer

makeTimer, but with a fully reactive delay. The delay can also be false, in which case the timer is disabled. Does not return a dispose function.

const callback = () => {};
createTimer(callback, 1000, setTimeout);
createTimer(callback, 1000, setInterval);
// with reactive delay
const callback = () => {};
const [paused, setPaused] = createSignal(false);
const [delay, setDelay] = createSignal(1000);
createTimer(callback, () => !paused() && delay(), setTimeout);
createTimer(callback, () => !paused() && delay(), setInterval);
// ...
setDelay(500);
// pause
setPaused(true);
// unpause
setPaused(false);

createTimeoutLoop

Similar to an interval created with createTimer, but the delay does not update until the callback is executed.

const callback = () => {};
createTimeoutLoop(callback, 1000);
// with reactive delay
const callback = () => {};
const [delay, setDelay] = createSignal(1000);
createTimeoutLoop(callback, delay);
// ...
setDelay(500);

createPolled

Periodically polls a function, returning an accessor to its last return value.

const date = createPolled(() => new Date(), 1000);
// ...
<span>The time is: {date()}</span>;
// with reactive delay
const [delay, setDelay] = createSignal(1000);
createPolled(() => new Date(), delay);
// ...
setDelay(500);

createIntervalCounter

A counter which increments periodically based on the delay.

const count = createIntervalCounter(1000);
// ...
<span>Count: {count()}</span>;
// with reactive delay
const [delay, setDelay] = createSignal(1000);
createIntervalCounter(delay);
// ...
setDelay(500);

Note on Reactive Delays

When a delay is changed, the fraction of the existing delay already elapsed be carried forward to the new delay. For instance, a delay of 1000ms changed to 2000ms after 250ms will be considered 1/4 done, and next callback will be executed after 250ms + 1500ms. Afterwards, the new delay will be used.

Demo

You may view a working example here: https://codesandbox.io/s/solid-primitives-timer-6n7dt?file=/src/index.tsx

Changelog

Expand Changelog

0.0.100

First commit of the timer primitive.

0.0.107

Patched an issue with clear on clean-up.

1.0.3

Release official version with CJS support.

1.1.0

Updated to Solid 1.3

1.3.0

PR#106

Added makeTimer, createTimeoutLoop, createPolled, createIntervalCounter, and made the timeout of createTimer optionally reactive.

1.3.1

PR#113

Make the calc function of createPolled reactive