Throttle and Debounce
Whenever I need to use throttle or debounce I have to remind myself of the differences. Here are a few definitions as a reminder.
Creates a throttled function that only invokes func at most once per every wait milliseconds.lodash throttle
Throttling enforces a maximum number of times a function can be called over time. As in “execute this function at most once every 100 milliseconds”.CSS-TRICKS
Creates a debounced function that delays invoking func until after wait milliseconds have elapsed since the last time the debounced function was invoked.lodash debounce
Debouncing enforces that a function not be called again until a certain amount of time has passed without it being called. As in “execute this function only if 100 milliseconds have passed without it being called”.CSS-TRICKS
Use left and right arrow keys to navigate and see the different behaviours of throttle and debounce.
- press left/right keys
- press and hold left/right keys
You can also see this example and code in the svelte repl.