Last Updated: February 25, 2016
·
1.761K
· josephjaber

Need to Throttle? Consider Debouncing.

Throttling is a good way to rate limit the amount of times a function is called, which might be helpful for functions involving user input. Debouncing is similar to throttling but with a subtle difference that may be advantageous in certain circumstances.

Throttling

Limits the execution of a function call to once per a duration of time. Throttling by 3 seconds would limit a function to only execute once every 3 seconds.

Throttling is particularly useful in cases where you need to wait before being able to call the function again, but also when it needs to be updated as soon as possible or at a constant pace. (e.g. waiting for an animation to finish or periodically caching user input)

Debouncing

Limits a function to execute only after the rate of calls has delayed for a duration of time. Debouncing by 3 seconds would only execute a function if it has not been called in the past 3 seconds.

Debouncing is useful when you need to guarantee a function is called but do not want it to be called at a constant interval. (e.g. only performing an AJAX request on a search input when the user's typing has paused or finished)

Try Limit.js for a throttling/debouncing library.