Throttling technique
Real-life example:
Imagine yourself as a 7-year-old toddler who loves to eat chocolate cake! Today your mom has made one, but it's not for you, it's for the guests! You, being spunky, keep on asking her for the cake. Finally, she gives you the cake. But, you keep on asking her for more. Annoyed, she agrees to give you more cake with a condition that you can have the cake only after an hour. Still, you keep on asking her for the cake, but now she ignores you. Finally, after an interval of one hour, you get more cake. If you ask for more, you will get it only after an hour, no matter how many times you ask her. This is what throttling is!
It calls a function only once in a given time interval.
- it doesn't matter how many times the user fires the event.
it will reduce the notifications of an event that fires multiple times.
Use Cases: for Throttle
Throttle is useful for cases where the user is carrying out a smooth or continuous event, such as scrolling or resizing. In the event of animating elements based on their scroll position or handling an infinite scroll page, we can use throttle to control how often the scroll handler is called
Debouncing technique
Real-life example:
Consider the same cake example. This time you kept on asking your mom for the cake so many times that she got annoyed and told you that she will give you the cake only if you remain silent for one hour. This means you won’t get the cake if you keep on asking her continuously - you will only get it one hour after last time you ask, once you stop asking for the cake. This is debouncing.
It calls a function after the specified time once the user stops firing the event.
- it doesn’t matter how many times the user fires the event.
it ensures that one notification is made for an event that fires multiple times.
Use Cases: Search box suggestions, text-field auto-saves, and eliminating double-button clicks are all use cases for debounce
What was the difference?
It is quite clear now, check this real example
demo.nimius.net/debounce_throttle is a good visualization
ref:
https://www.telerik.com/blogs/debouncing-and-throttling-in-javascript
Top comments (0)