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.
npm install @solid-primitives/timer
# or
yarn add @solid-primitives/timerMakes 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 neededmakeTimer, 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);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);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);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);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.
You may view a working example here: https://codesandbox.io/s/solid-primitives-timer-6n7dt?file=/src/index.tsx
See CHANGELOG.md