Not to worry, neither are Javascript features you don’t know about, but merely a concept.
Both mainly used to group events firing. How?
Consider this common scenario where we’re creating an autocomplete search input, you’ll start to realize that it’s somewhat wasteful to fetch autocomplete results on every keystroke while the user is probably still rapidly completing the typing.
Wouldn’t it be better if we’re able to do autocomplete fetching only when the user pause on typing? The approach we can apply in this situation is called, debouncing.
- User is typing…
- When the user pause on typing for over a certain period of small-time (say, 800ms), get the last search input value and then fetch the autocomplete results.
This will also indirectly minimize the amount of unnecessary hit to the autocomplete API endpoint while improving the user experience with less stutter on typing.
Throttling basically means any events firing in X period of time (say 1000ms) will only be executed right at 1000ms interval continuously.
A common use case to this approach is during infinite scrolling.
We want to load the next results before the user scrolling reach the bottom page. We can continuously listen to scrolling events to know the current scroll position. If it’s about to reach the bottom page by a certain pixel distance, then get & load the next results.
If you’re on React, the next version of React 18 is introducing startTransition function that will facilitate this situation better.
Refs:
Detailed explanation on this topic —
https://css-tricks.com/debouncing-throttling-explained-examples/
React 18 — startTransition —
https://github.com/reactwg/react-18/discussions/41
