useTimeoutFn

Reactive wrapper for setTimeout with start/stop control

Execute a function after a given delay with reactive isPending$ state and manual start/stop control. Returns a Stoppable — isPending$ is an Observable<boolean> you can subscribe to.

Demo

Timeout Function

Fired

Fires a callback after 3 seconds.

Please wait for 3 seconds

Restart

Usage

Hook

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

function Component() {
  const { isPending$, start, stop } = useTimeoutFn(() => {
    console.log("fired!");
  }, 1000);

  // isPending$.get() === true while waiting
  // stop() cancels the pending timeout
  // start() restarts the timer (resets if already pending)
}

Scope

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

function Component() {
  "use scope"
  const { isPending$, start, stop } = createTimeoutFn(() => {
    console.log("fired!");
  }, observable(1000));

  // isPending$.get() === true while waiting
  // stop() cancels the pending timeout
  // start() restarts the timer (resets if already pending)
}

Manual start (immediate: false)

Hook

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

function Component() {
  const { isPending$, start } = useTimeoutFn(() => console.log("done"), 500, {
    immediate: false,
  });

  // call start() manually when ready
}

Scope

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

function Component() {
  "use scope"
  const { isPending$, start } = createTimeoutFn(() => console.log("done"), observable(500), {
    immediate: false,
  });

  // call start() manually when ready
}

Reactive interval (MaybeObservable)

Hook

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

function Component() {
  const delay$ = observable(1000);
  const { start } = useTimeoutFn(() => {}, delay$);
  // start() always reads current value of delay$
}

Scope

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

function Component() {
  "use scope"
  const delay$ = observable(1000);
  const { start } = createTimeoutFn(() => {}, delay$);
  // start() always reads current value of delay$
}

immediateCallback

Hook

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

function Component() {
  const { start } = useTimeoutFn((msg?: string) => console.log("fired", msg), 1000, {
    immediate: false,
    immediateCallback: true,
  });

  start("hello");
  // → cb() called immediately with no args
  // → cb("hello") called again after 1000ms
}

Scope

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

function Component() {
  "use scope"
  const { start } = createTimeoutFn((msg?: string) => console.log("fired", msg), observable(1000), {
    immediate: false,
    immediateCallback: true,
  });

  start("hello");
  // → cb() called immediately with no args
  // → cb("hello") called again after 1000ms
}

Type

Parameters

Parameter	Type	Description
cb	AnyFn	- Callback to invoke after the delay.
interval$	MaybeObservable<number>	- Observable that returns the delay in ms (read at each start() call).
options	TimeoutFnOptions | undefined (optional)	- Mount-time-only options.

TimeoutFnOptions

Option	Type	Default	Description
immediate	boolean	true	If true, calls start() immediately.
immediateCallback	boolean	false	If true, calls cb() immediately (no args) when start() is called, then again after the delay with the original args.

Returns

Stoppable<any[]>

Name	Type	Description
isPending$	ObservableBoolean<boolean>	-
stop	Fn	-
start	(...args: any[]) => void	-

Source

View on GitHub