Superutils

Appearance

Function: throttle() ​

throttle<TArgs, ThisArg>(callback, delay, config): (...args) => void

Defined in: packages/core/src/deferred/throttle.ts:59

Returns a throttled function that ensures the callback is invoked at most once in the specified delay interval. All errors will be gracefully swallowed.

If the throttled function is called multiple times during the delay interval, only the first call will invoke the callback immediately.

If trailing is enabled and if returned function is invoked more than once during the delay interval, the callback runs again at the end of the delay with the most recent arguments.

Type Parameters ​

TArgs ​

TArgs extends unknown[]

ThisArg ​

ThisArg

Parameters ​

callback ​

(this, ...args) => unknown

function to be invoked after timeout

delay ​

number = 50

(optional) interval duration in milliseconds. Default: 50

config ​

ThrottleOptions<ThisArg> = {}

(optional)

Returns ​

(...args): void

Parameters ​

args ​

...TArgs

Returns ​

void

Examples ​

Try Now!
javascript
import { throttle } from '@superutils/core'

const handleChange = throttle(
    event => console.log('Value:', event.target.value),
    300, // throttle duration in milliseconds
)
handleChange({ target: { value: 1 } }) // will be executed
handleChange({ target: { value: 2 } }) // will be ignored
handleChange({ target: { value: 3 } }) // will be ignored

setTimeout(() => {
   handleChange({ target: { value: 4 } }) // will be executed (after 300ms)
   handleChange({ target: { value: 5 } }) // will be ignored
}, 400)
Try Now!
javascript
import { throttle } from '@superutils/core'

const handleChange = throttle(
    event => console.log('Value:', event.target.value),
    300, // throttle duration in milliseconds
)
handleChange({ target: { value: 1 } }) // will be executed
handleChange({ target: { value: 2 } }) // will be ignored
handleChange({ target: { value: 3 } }) //  will be executed

setTimeout(() => {
   handleChange({ target: { value: 4 } }) // will be executed
   handleChange({ target: { value: 5 } }) // will be ignored
}, 400)