> ## Documentation Index
> Fetch the complete documentation index at: https://prefab.prefect.io/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Set Interval
> Run actions on a repeating schedule with optional stop conditions.
export const ComponentPreview = ({json, height, resizable, bare, hideJson, playground, children}) => {
const hostRef = React.useRef(null);
const handleRef = React.useRef(null);
const cardRef = React.useRef(null);
const containerRef = React.useRef(null);
const [previewWidth, setPreviewWidth] = React.useState(null);
const [isDragging, setIsDragging] = React.useState(false);
const [playgroundHref, setPlaygroundHref] = React.useState(null);
React.useEffect(function () {
if (!playground) return;
var isLocal = location.hostname === "localhost" || location.hostname === "127.0.0.1";
var path = isLocal ? "/playground" : "/docs/playground";
var url = new URL(path, window.location.href);
url.hash = "code=" + playground;
setPlaygroundHref(url.href);
}, [playground]);
var jsonStr = typeof json === "string" ? json : JSON.stringify(json, null, 2);
React.useEffect(function () {
if (cardRef.current) {
var card = cardRef.current.closest(".group");
if (card) card.classList.remove("group");
}
var host = hostRef.current;
if (!host || !json) return;
function mount() {
if (!window.__prefab || !host) return;
var dark = document.documentElement.classList.contains("dark");
handleRef.current = window.__prefab.mountPreview(host, jsonStr, {
dark: dark
});
if (bare && host.shadowRoot) {
var m = host.shadowRoot.querySelector("[data-prefab-mount]");
if (m) m.style.background = "transparent";
}
}
if (window.__prefab) {
mount();
} else {
if (!window.__prefabLoading) {
if (!window.__prefabReady) {
var s = document.createElement("script");
s.src = "/renderer.js";
document.head.appendChild(s);
}
window.__prefabLoading = new Promise(function (resolve) {
function check() {
if (window.__prefabReady) {
window.__prefabReady.then(resolve);
} else {
setTimeout(check, 10);
}
}
check();
});
}
window.__prefabLoading.then(mount);
}
var observer = new MutationObserver(function () {
var dark = document.documentElement.classList.contains("dark");
if (handleRef.current) handleRef.current.setDark(dark);
});
observer.observe(document.documentElement, {
attributes: true,
attributeFilter: ["class"]
});
return function () {
observer.disconnect();
if (handleRef.current) {
handleRef.current.unmount();
handleRef.current = null;
}
};
}, [json]);
function startResize(e) {
e.preventDefault();
var startX = e.clientX;
var startW = hostRef.current ? hostRef.current.offsetWidth : 0;
var maxW = containerRef.current ? containerRef.current.offsetWidth - 10 : startW;
setIsDragging(true);
function onMove(ev) {
var w = Math.max(260, Math.min(startW + (ev.clientX - startX), maxW));
setPreviewWidth(w);
}
function onUp() {
document.removeEventListener("mousemove", onMove);
document.removeEventListener("mouseup", onUp);
setIsDragging(false);
}
document.addEventListener("mousemove", onMove);
document.addEventListener("mouseup", onUp);
}
if (bare) {
return ;
}
if (resizable) {
return
{previewWidth &&
{previewWidth}px
}
{playgroundHref && }
{children}
;
}
return
{playgroundHref && }
{children}
;
};
`SetInterval` runs actions on a repeating timer. Each tick fires `on_tick`, and the timer stops automatically when a `while_` condition becomes false, a `count` limit is reached, or both. When it stops, `on_complete` fires one final time.
## One-Shot Delay
Set `count=1` to fire once after a pause — no separate "delay" action needed. Put your logic in `on_complete` and it runs when the timer finishes. The button below swaps to a waiting state so the user knows something is happening.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button
from prefab_ui.actions import SetInterval, SetState, ShowToast
from prefab_ui.rx import Rx
waiting = Rx("waiting")
Button(
waiting.then("Waiting…", "Start 3 second timer"),
disabled=waiting.default(False),
on_click=[
SetState(waiting, True),
SetInterval(
3000,
count=1,
on_complete=[
ShowToast(
"Three seconds. An eternity for"
" a brain the size of a planet.",
variant="info",
),
SetState(waiting, False),
],
),
],
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"type": "Button",
"label": "{{ waiting ? 'Waiting\u2026' : 'Start 3 second timer' }}",
"variant": "default",
"size": "default",
"disabled": "{{ waiting | default:false }}",
"onClick": [
{"action": "setState", "key": "waiting", "value": true},
{
"action": "setInterval",
"duration": 3000,
"count": 1,
"onComplete": [
{
"action": "showToast",
"message": "Three seconds. An eternity for a brain the size of a planet.",
"variant": "info"
},
{"action": "setState", "key": "waiting", "value": false}
]
}
]
}
}
```
## Countdown
Each tick decrements `seconds` in state, and the display reflects the current value through reactive expressions. When `seconds` reaches zero, the `while_` condition becomes false and the interval stops on its own.
0 ? 'T-minus ' + seconds + '\u2026' : 'Ready for launch' }}","type":"Text"},{"type":"Button","label":"{{ seconds > 0 ? 'Counting down' : 'Begin countdown' }}","variant":"default","size":"default","disabled":"{{ seconds > 0 }}","onClick":[{"action":"setState","key":"seconds","value":10},{"action":"setInterval","duration":1000,"while":"{{ seconds > 0 }}","onTick":{"action":"setState","key":"seconds","value":"{{ seconds - 1 }}"}}]}]}}} playground="ZnJvbSBwcmVmYWJfdWkuY29tcG9uZW50cyBpbXBvcnQgQnV0dG9uLCBDb2x1bW4sIFRleHQKZnJvbSBwcmVmYWJfdWkuYWN0aW9ucyBpbXBvcnQgU2V0SW50ZXJ2YWwsIFNldFN0YXRlCmZyb20gcHJlZmFiX3VpLnJ4IGltcG9ydCBSeAoKc2Vjb25kcyA9IFJ4KCJzZWNvbmRzIikKCndpdGggQ29sdW1uKGdhcD00LCBjc3NfY2xhc3M9Iml0ZW1zLWNlbnRlciIpOgogICAgVGV4dCgKICAgICAgICAoc2Vjb25kcyA-IDApLnRoZW4oCiAgICAgICAgICAgICJULW1pbnVzICIgKyBzZWNvbmRzICsgIuKApiIsCiAgICAgICAgICAgICJSZWFkeSBmb3IgbGF1bmNoIiwKICAgICAgICApLAogICAgICAgIGNzc19jbGFzcz0idGV4dC0yeGwgZm9udC1tb25vIiwKICAgICkKICAgIEJ1dHRvbigKICAgICAgICAoc2Vjb25kcyA-IDApLnRoZW4oIkNvdW50aW5nIGRvd24iLCAiQmVnaW4gY291bnRkb3duIiksCiAgICAgICAgZGlzYWJsZWQ9c2Vjb25kcyA-IDAsCiAgICAgICAgb25fY2xpY2s9WwogICAgICAgICAgICBTZXRTdGF0ZShzZWNvbmRzLCAxMCksCiAgICAgICAgICAgIFNldEludGVydmFsKAogICAgICAgICAgICAgICAgMTAwMCwKICAgICAgICAgICAgICAgIHdoaWxlXz1zZWNvbmRzID4gMCwKICAgICAgICAgICAgICAgIG9uX3RpY2s9U2V0U3RhdGUoc2Vjb25kcywgc2Vjb25kcyAtIDEpLAogICAgICAgICAgICApLAogICAgICAgIF0sCiAgICApCg">
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Column, Text
from prefab_ui.actions import SetInterval, SetState
from prefab_ui.rx import Rx
seconds = Rx("seconds")
with Column(gap=4, css_class="items-center"):
Text(
(seconds > 0).then(
"T-minus " + seconds + "…",
"Ready for launch",
),
css_class="text-2xl font-mono",
)
Button(
(seconds > 0).then("Counting down", "Begin countdown"),
disabled=seconds > 0,
on_click=[
SetState(seconds, 10),
SetInterval(
1000,
while_=seconds > 0,
on_tick=SetState(seconds, seconds - 1),
),
],
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4 items-center",
"type": "Column",
"children": [
{
"cssClass": "text-2xl font-mono",
"content": "{{ seconds > 0 ? 'T-minus ' + seconds + '\u2026' : 'Ready for launch' }}",
"type": "Text"
},
{
"type": "Button",
"label": "{{ seconds > 0 ? 'Counting down' : 'Begin countdown' }}",
"variant": "default",
"size": "default",
"disabled": "{{ seconds > 0 }}",
"onClick": [
{"action": "setState", "key": "seconds", "value": 10},
{
"action": "setInterval",
"duration": 1000,
"while": "{{ seconds > 0 }}",
"onTick": {"action": "setState", "key": "seconds", "value": "{{ seconds - 1 }}"}
}
]
}
]
}
}
```
## Start and Stop
Store a boolean flag in state and reference it in `while_`. Any action can flip the flag — the interval checks it on the next tick and stops. Here, one button starts an incrementing counter and another stops it. The same pattern works for periodic server polling with `CallTool` in `on_tick`.
```python Python icon="python" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
from prefab_ui.components import Button, Row, Text
from prefab_ui.actions import SetInterval, SetState
from prefab_ui.rx import Rx
running = Rx("running")
ticks = Rx("ticks")
with Row(gap=4, css_class="items-center"):
Button(
"Start",
disabled=running.default(False),
on_click=[
SetState(running, True),
SetState(ticks, 0),
SetInterval(
1000,
while_=running,
on_tick=SetState(ticks, ticks + 1),
),
],
)
Text(
ticks.default(0),
css_class="text-2xl font-mono tabular-nums",
)
Button(
"Stop",
variant="outline",
disabled=~running,
on_click=SetState(running, False),
)
```
```json Protocol icon="brackets-curly" theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"view": {
"cssClass": "gap-4 items-center",
"type": "Row",
"children": [
{
"type": "Button",
"label": "Start",
"variant": "default",
"size": "default",
"disabled": "{{ running | default:false }}",
"onClick": [
{"action": "setState", "key": "running", "value": true},
{"action": "setState", "key": "ticks", "value": 0},
{
"action": "setInterval",
"duration": 1000,
"while": "{{ running }}",
"onTick": {"action": "setState", "key": "ticks", "value": "{{ ticks + 1 }}"}
}
]
},
{
"cssClass": "text-2xl font-mono tabular-nums",
"content": "{{ ticks | default:0 }}",
"type": "Text"
},
{
"type": "Button",
"label": "Stop",
"variant": "outline",
"size": "default",
"disabled": "{{ !running }}",
"onClick": {"action": "setState", "key": "running", "value": false}
}
]
}
}
```
If neither `while_` nor `count` is set, the interval runs indefinitely until the component tree is replaced.
## API Reference
Milliseconds between ticks. Passed as a positional argument.
Condition expression re-evaluated each tick against current state. When
it evaluates to falsy, the interval stops and `on_complete` fires. Serializes
as `"while"` on the wire.
Maximum number of ticks. The interval stops after this many.
Action(s) to run each tick. `$event` is the tick number (1, 2, 3, ...).
Action(s) to run when the interval finishes.
## Protocol Reference
```json SetInterval theme={"theme":{"light":"snazzy-light","dark":"dark-plus"}}
{
"action": "setInterval",
"duration": "number | string (required)",
"while?": "string",
"count?": "number",
"onTick?": "Action | Action[]",
"onComplete?": "Action | Action[]"
}
```
For the complete protocol schema, see [SetInterval](/docs/protocol/set-interval).