Delays

Use after for a transition that occurs after a state has been active for a duration.

loading: { after: { 5_000: { target: 'timedOut' } } }

The timer starts when the state is entered and is canceled when the state is exited.

Named delays

const appSetup = setup({ delays: { retryDelay: 1_000 } });

Delayed events

enq.raise({ type: 'search' }, { delay: 300, id: 'debounce' });
enq.cancel('debounce');

Use delayed transitions for behavior tied to the current state. Use delayed events when another transition may replace or cancel the pending event.

Common examples include:

• moving a notification from visible to hidden after five seconds
• waiting before retrying a failed request
• debouncing search input by canceling the previous delayed event

TypeScript

Named delay references are checked against configured delay sources.

Delays cheatsheet

after: { 1000: { target: 'next' } }
enq.raise(event, { delay: 1000, id: 'timer' });
enq.cancel('timer');