data-on-interval

Run an expression on a timer until the element unmounts.

Syntax

data-on-interval="$ticks++"
data-on-interval__duration.5s="@get('/status')"
data-on-interval__duration.250ms="…"

part
key	forbidden
value	required: statements

Modifiers

modifier	effect
__duration.ms|s	the interval, default 1s

Tick

every 500ms

ticks:

<div data-signals="{ ticks: 0 }" data-on-interval__duration.500ms="$ticks++">ticks: <b data-text="$ticks"></b></div>

Poll the server

The usual htmx every 5s pattern: a request on a timer, morphing whatever comes back.

polling

Server time, refreshed every 3s: …

<div data-on-interval__duration.3s="@get('/api/time')" data-init="@get('/api/time')">Server time, refreshed every 3s: <span id="server-time" class="muted">…</span></div>

Stop by removing the element

The timer is cleared on unmount, so data-show is not enough to pause it; remove the element instead.

start and stop

start n =

<div data-signals="{ running: false, n: 0 }">
  <div class="row"><button data-on:click="$running = !$running" data-text="$running ? 'stop' : 'start'">start</button> <span>n = <b data-text="$n"></b></span></div>
  <div data-effect="el.innerHTML = $running ? '<span data-on-interval__duration.200ms=\'$n++\' class=\'muted\'>ticking…</span>' : '<span class=\'muted\'>stopped</span>'"></div>
</div>

Notes

The first run happens after one interval; put data-init next to it for an immediate first run, as in the polling demo. Browsers throttle timers in background tabs.

Register

import { onInterval } from 'sigmx/plugins'

Registering onInterval adds 212 bytes brotli (230 gzip, 459 minified) on top of the core. See bundle sizes.