Timer

Timer is a non-visual component that fires events at regular intervals. It can be enabled or disabled and ensures that the timer event handler completes before firing the next event.

Using Timer

The following sample demonstrates many aspects of the Timer component. Use the switches and the buttons to observe how the component works.

<App var.count="{0}">
  <Text>
    Count: {count} | Timer is {timer.isPaused() ? 'paused' : 'running'}
  </Text>
  <Timer
    id="timer"
    initialDelay="2000"
    interval="200"
    onTick="count++;"
    enabled="{enable.value}"
    once="{once.value}" />
  <Switch id="enable" label="Enable Timer" initialValue="true" />
  <Switch id="once" label="Run Once" initialValue="{false}" />
  <HStack>
    <Button onClick="timer.pause()" enabled="{!timer.isPaused()}">
      Pause
    </Button>
    <Button onClick="timer.resume()" enabled="{timer.isPaused()}">
      Resume
    </Button>
  </HStack>
</App>

<App var.count="{0}">
  <Text>
    Count: {count} | Timer is {timer.isPaused() ? 'paused' : 'running'}
  </Text>
  <Timer
    id="timer"
    initialDelay="2000"
    interval="200"
    onTick="count++;"
    enabled="{enable.value}"
    once="{once.value}" />
  <Switch id="enable" label="Enable Timer" initialValue="true" />
  <Switch id="once" label="Run Once" initialValue="{false}" />
  <HStack>
    <Button onClick="timer.pause()" enabled="{!timer.isPaused()}">
      Pause
    </Button>
    <Button onClick="timer.resume()" enabled="{timer.isPaused()}">
      Resume
    </Button>
  </HStack>
</App>

Behaviors

This component supports the following behaviors:

Properties

enabled

default: true

Whether the timer is enabled and should fire events.

initialDelay

default: 0

The delay in milliseconds before the first timer event.

interval

default: 1000

The interval in milliseconds between timer events.

once

default: false

Whether the timer should stop after firing its first tick event.

Events

tick

This event is triggered at each interval when the Timer is enabled.

Signature: tick(): void

Exposed Methods

isPaused

Returns whether the timer is currently paused.

Signature: isPaused(): boolean

isRunning

Returns whether the timer is currently running (enabled and not paused).

Signature: isRunning(): boolean

pause

Pauses the timer. The timer can be resumed later from where it left off.

Signature: pause()

resume

Resumes a paused timer. If the timer is not paused, this method has no effect.

Signature: resume()

Styling

This component does not have any styles.