# Timer

Nonvisual timer with single or repeated execution.

URL: https://webrad.atentor.com/docs/timer
Updated: 2026-11-07

WebTimer · Nonvisual · Nonvisual · 3 events

## Quick start

Add **Timer1** in the Designer. Use the example in a page method.

```ts
Timer1.time = 1000;
Timer1.loop = true;
Timer1.onTimer = (sender) => {
  Message(sender.tickCount);
  if (sender.tickCount >= 5) sender.Stop();
};
Timer1.Start();
// Timer1.Stop();
// Timer1.Restart();
```

Defaults: Time = 1000 ms, Loop = true, and Enabled = false. Enable Enabled in the Inspector to start automatically.

- Configure **Time (ms)**, **Loop**, and **Enabled** in the nonvisual component tray.
- time accepts an integer between 1 and 2147483647 ms. Changing time while running restarts the current interval.
- Start() starts and resets tickCount; called while running, it preserves the count. Stop() stops; Restart() stops and starts again.
- loop = false runs once. OnTimer receives detail.tick; OnStart and OnStop track state.
- Each page or reusable component has its own instance; disposal cancels the timer.

## More examples

Single execution with typed detail

```ts
import type { WebTimer, WebTimerEventDetail } from '@webrad/runtime';
// Set Loop = false and link this method to OnTimer.
class Example {
  public async Timer1Timer(
    sender: WebTimer,
    event: CustomEvent<WebTimerEventDetail>,
  ): Promise<void> {
    Message(event.detail.tick);
    // For single execution, sender.enabled is already false in this event.
  }
}
```

## Inspector properties

Component options and defaults. Fields without runtime access are configured in the Inspector.

| Property / source | Type and options | Default | Runtime access |
| --- | --- | --- | --- |
| `name` — Name · Identity | `string` | `—` | name |
| `time` — Time (ms) · Behavior — Interval in milliseconds (1 to 2147483647). Changing it restarts the current interval. | `number` | `1000` | time |
| `loop` — Loop · Behavior | `boolean` | `true` | loop |
| `enabled` — Enabled · Behavior | `boolean` | `false` | enabled |

## API in code

| Member | Signature | Access |
| --- | --- | --- |
| `time` | `get time(): number;` | Read and write |
| `loop` | `get loop(): boolean;` | Read and write |
| `enabled` | `get enabled(): boolean;` | Read and write |
| `tickCount` | `get tickCount(): number;` | Read-only |
| `onTimer` | `set onTimer(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onStart` | `set onStart(handler: WebComponentEventHandler<this> \| null);` | Read and write |
| `onStop` | `set onStop(handler: WebComponentEventHandler<this> \| null);` | Read and write |

### `Start`

method

```ts
Start(): void;
```

Starts a new run; calling Start while running has no effect.

Example

```ts
Timer1.Start();
```

### `Stop`

method

```ts
Stop(): void;
```

Example

```ts
Timer1.Stop();
```

### `Restart`

method

```ts
Restart(): void;
```

Example

```ts
Timer1.Restart();
```

### `dispose`

method

```ts
dispose(): void;
```

Example

```ts
// Call only when disposing of an instance whose lifecycle you control.
Timer1.dispose();
```

Inherited members (4)

| Member | Signature | Access |
| --- | --- | --- |
| `id` | `readonly id: string;` | Read-only |
| `name` | `readonly name: string;` | Read-only |

### `bindEvent`

method

```ts
bindEvent(eventName: string, handler: WebComponentEventHandler<this> | null): () => void;
```

### `emit`

method

```ts
emit(eventName: string, detail?: unknown): boolean;
```

## Events

Link methods in **Interaction**. [How to use events](https://webrad.atentor.com/docs/interactions).

### OnTimer

[WebTimerEventDetail](https://webrad.atentor.com/docs/types#webtimereventdetail) in `event.detail` · `tick`

Signature and example

```ts
import type { WebTimer, WebTimerEventDetail } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Timer1Timer(
    sender: WebTimer,
    event: CustomEvent<WebTimerEventDetail>,
  ): Promise<void> {
    console.log(event.detail);
    const { tick } = event.detail;
    console.log(tick);
  }
}
```

### OnStart

Standard event (Event).

Signature and example

```ts
import type { WebTimer } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Timer1Start(
    sender: WebTimer,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```

### OnStop

Standard event (Event).

Signature and example

```ts
import type { WebTimer } from '@webrad/runtime';
// Copy this method into the page class and link it in Interaction.
class Example {
  public async Timer1Stop(
    sender: WebTimer,
    event: Event,
  ): Promise<void> {
    console.log(sender.name, event.type);
  }
}
```