delay

import { delay } from 'patronum';
// or
import { delay } from 'patronum/delay';

`delay(source, timeout: number)`

Motivation

Method creates a new event that will be triggered after some time. It is useful for implementing timeouts, animations, or scheduling delayed operations.

Formulae

target = delay(source, timeout);

When source is triggered, wait for timeout, then trigger target with payload of the source

Arguments

source (Event<T> | Store<T> | Effect<T>) — Source unit, data from this unit used to trigger target with.
timeout (number) — time to wait before trigger event

Returns

target (Event<T>) — New event which will receive source payload after timeout delay

Example

import { createEvent } from 'effector';
import { delay } from 'patronum/delay';

const trigger = createEvent<string>(); // createStore or createEffect
const delayed = delay(trigger, 300);

delayed.watch((payload) => console.info('triggered', payload));

trigger('hello');
// after 300ms
// => triggered hello

`delay({ source, timeout: number, target })`

Motivation

This overload is useful when you already have a target unit that needs to be triggered with a delay.

Formulae

target = delay({ source, timeout: number, target });

When source is triggered, wait for timeout, then trigger target with payload of the source

Arguments

source (Event<T> | Store<T> | Effect<T>) — Source unit, data from this unit used to trigger target with.
timeout (number) — time to wait before trigger event
target (Unit<T> | Array<Unit<T>>) — Optional. Target unit or array of units that will be called after delay.

Returns

target (Unit<T> | Array<Unit<T>>) — Target unit or units that were passed to delay

Example

import { createEvent } from 'effector';
import { delay } from 'patronum/delay';

const trigger = createEvent<string>(); // createStore or createEffect
const delayed = createEvent<string>();
delay({
  source: trigger,
  timeout: 300,
  target: delayed,
});

delayed.watch((payload) => console.info('triggered', payload));

trigger('hello');
// after 300ms
// => triggered hello

`delay(source, timeout: Function)`

Motivation

This overload allows to calculate timeout from payload of source. It is useful when you know that calculations requires more time if you have more data for payload.

Formulae

target = delay(source, timeout);

When source is triggered, call timeout with payload to get the timeout for delay, then trigger target with payload of the source

Arguments

source (Event<T> | Store<T> | Effect<T>) — Source unit, data from this unit used to trigger target with.
timeout ((payload: T) => number) — Calculate delay for each source call. Receives the payload of source as argument. Should return number — delay in milliseconds.

Returns

target (Event<T>) — New event which will receive source payload after timeout delay

Example

import { createEvent, createStore } from 'effector';
import { delay } from 'patronum/delay';

const update = createEvent<string>();
const $data = createStore('');
const logDelayed = delay($data, (string) => string.length * 100);

logDelayed.watch((data) => console.log('log', data));

update('Hello');
// after 500ms
// => log Hello

update('!');
// after 100ms
// => log !

`delay({ source, timeout: Function, target })`

Motivation

This overload allows to calculate timeout from payload of source. It is useful when you know that calculations requires more time if you have more data for payload.

Formulae

target = delay({ source, timeout: Function, target });

When source is triggered, call timeout with payload to get the timeout for delay, then trigger target with payload of the source

Arguments

source (Event<T> | Store<T> | Effect<T>) — Source unit, data from this unit used to trigger target with.
timeout ((payload: T) => number) — Calculate delay for each source call. Receives the payload of source as argument. Should return number — delay in milliseconds.
target (Unit<T> | Array<Unit<T>>) — Optional. Target unit or array of units that will be called after delay.

Returns

target (Unit<T> | Array<Unit<T>>) — Target unit or units that were passed to delay

Example

import { createEvent, createStore } from 'effector';
import { delay } from 'patronum/delay';

const update = createEvent<string>();
const logDelayed = createEvent<string>();
const $data = createStore('');

delay({
  source: $data,
  timeout: (string) => string.length * 100,
  target: logDelayed,
});

logDelayed.watch((data) => console.log('log', data));

update('Hello');
// after 500ms
// => log Hello

update('!');
// after 100ms
// => log !

`delay(source, timeout: Store<T>)`

Motivation

This overload allows you to read timeout from another store. It is useful when you write music editor and need dynamic delay for your events.

Formulae

target = delay(source, timeout);

When source is triggered, read timeout from timeout store, then trigger target with payload of the source

Arguments

source (Event<T> | Store<T> | Effect<T>) — Source unit, data from this unit used to trigger target with.
timeout (Store<number>) — Store with number — delay in milliseconds.

Returns

target (Event<T>) — New event which will receive source payload after timeout delay

Example

import { createEvent, createStore } from 'effector';
import { delay } from 'patronum/delay';

const update = createEvent<string>();
const $timeout = createStore(500);

const logDelayed = delay(update, $timeout);

logDelayed.watch((data) => console.log('log', data));

update('Hello');
// after 500ms
// => log Hello

`delay({ source, timeout: Store<T>, target })`

Motivation

This overload allows you to read timeout from another store. It is useful when you write music editor and need dynamic delay for your events.

Formulae

target = delay({ source, timeout: $store, target });

When source is triggered, read timeout from timeout store, then trigger target with payload of the source

Arguments

source (Event<T> | Store<T> | Effect<T>) — Source unit, data from this unit used to trigger target with.
timeout (Store<number>) — Store with number — delay in milliseconds.
target (Unit<T> | Array<Unit<T>>) — Optional. Target unit or array of units that will be called after delay.

Returns

target (Unit<T> | Array<Unit<T>>) — Target unit or units that were passed to delay

Example

import { createEvent, createStore } from 'effector';
import { delay } from 'patronum/delay';

const update = createEvent<string>();
const $timeout = createStore(500);

delay({
  source: update,
  timeout: $timeout,
  target: logDelayed,
});

logDelayed.watch((data) => console.log('log', data));

update('Hello');
// after 500ms
// => log Hello