
Member-only story
Throttling and Debouncing in JavaScript
Are you excessively invoking functions and hampering performance?
Tackling performance often crops up in JavaScript applications.
Throttling and debouncing give us control over the rate at which a function is called. They are need to know techniques for any web developer. They are especially useful when we are dealing with event handler assignments. There are scenarios where we may invoke functions when it isn’t necessary. Consider a callback that we want to execute on window resize. Does it make sense to fire the callback as we resize? Most likely not. We want to wait til the user has finished interaction and then fire the callback.
For those in camp TL;DR, here’s a demo!
What’s the difference between throttling and debouncing?
- Throttling — If you think of a car throttle. The amount you push your foot down limits the amount of gas going into the engine. In this context, we want to limit the amount a function is invoked. I find a…