useInterval
A wrapper for setInterval with controls for pausing and resuming.
useInterval
is a utility function that provides a reactive wrapper around setInterval
with
controls for pausing and resuming the execution.
Demo
Count: 0
Status: Running
Usage
<script lang="ts">
import { useInterval } from "runed";
let count = $state(0);
let intervalDelay = $state(1000);
const interval = useInterval(
() => count++,
() => intervalDelay
);
</script>
<p>Count: {count}</p>
<p>Interval delay: {intervalDelay}ms</p>
<p>Status: {isActive ? "Running" : "Paused"}</p>
<input type="number" bind:value={intervalDelay} min="100" step="100" />
<button onclick={interval.pause} disabled={!interval.isActive}>Pause</button>
<button onclick={interval.resume} disabled={interval.isActive}>Resume</button>
Options
The useInterval
function accepts an optional third parameter with the following options:
immediate
(default:true
) - Whether to start the interval immediatelyimmediateCallback
(default:false
) - Whether to execute the callback immediately when resuming
<script lang="ts">
import { useInterval } from "runed";
let count = $state(0);
const interval = useInterval(() => count++, 1000, {
immediate: false, // Don't start automatically
immediateCallback: true // Execute callback immediately on resume
});
</script>
Reactive Interval
The interval delay can be reactive, and the timer will automatically restart with the new interval when it changes:
<script lang="ts">
import { useInterval } from "runed";
let count = $state(0);
let speed = $state(1000);
// The interval will update reactively when speed changes
const interval = useInterval(
() => count++,
() => speed
);
</script>