useIntervalFn

Reactive setInterval wrapper with pause/resume control

Execute a function repeatedly at a given interval with reactive isActive state and pause/resume control. Returns a Pausable — isActive is a ReadonlyObservable<boolean>.

Demo

Interval Function

Paused

Cycles through greetings every 500ms.

HelloResume

Usage

Hook

import { useIntervalFn } from "@usels/web";

function Component() {
  const { isActive, pause, resume } = useIntervalFn(() => {
    console.log("tick");
  }, 1000);

  // isActive.get() === true while running
  // pause() / resume() to control execution
}

Scope

import { createIntervalFn, observable } from "@usels/web";

function Component() {
  "use scope"
  const { isActive$, pause, resume } = createIntervalFn(() => {
    console.log("tick");
  }, observable(1000));

  // isActive$.get() === true while running
  // pause() / resume() to control execution
}

immediateCallback

Hook

import { useIntervalFn } from "@usels/web";

function Component() {
  useIntervalFn(() => fetchData(), 5000, { immediateCallback: true });
  // calls fetchData() immediately on resume, then every 5s
}

Scope

import { createIntervalFn, observable } from "@usels/web";

function Component() {
  "use scope"
  createIntervalFn(() => fetchData(), observable(5000), { immediateCallback: true });
  // calls fetchData() immediately on resume, then every 5s
}

Reactive interval

Hook

import { observable, useIntervalFn } from "@usels/web";

function Component() {
  const ms$ = observable(1000);
  useIntervalFn(() => {}, ms$);
  // ms$.set(500) → automatically restarts with new interval
}

Scope

import { createIntervalFn, observable } from "@usels/web";

function Component() {
  "use scope"
  const ms$ = observable(1000);
  createIntervalFn(() => {}, ms$);
  // ms$.set(500) → automatically restarts with new interval
}

Notes

interval must be a positive number. 0 or negative values are passed directly to setInterval, which the browser clamps to ~4ms. Use pause() to stop execution instead of setting interval to 0.

Type

Parameters

Parameter	Type	Description
cb	AnyFn	-
interval	MaybeObservable<number> | undefined (optional)	-
options	IntervalFnOptions | undefined (optional)	-

IntervalFnOptions

Option	Type	Default	Description
immediate	boolean	true	If true, calls resume() immediately.
immediateCallback	boolean	false	If true, calls fn immediately when resume() is called.

Returns

Pausable

Name	Type	Description
isActive$	ReadonlyObservable<boolean>	-
pause	Fn	-
resume	Fn	-

Source

View on GitHub