A debouncer is a term that comes from electrical engineering. It helps keep functions from executing too many times, by waiting until the user has paused some task for a specific amount of time. This is useful for times when you want to do some expensive operation in javascript, but don't want it to slow down the interaction. For example, let's say that when a user types into a text box, on key press you want to:
The regular keypress was called 0 times. The debounced function was called 0 times.
Another good use cases would be if you want to have 2 specific debounced functions for different tasks, and use interaction to cancel one and perform the other. For instance, if you have a menu, and on "mouseleave" you don't want to close the menu right away (but you do want it to disappear after a short delay). But if the user moves back over it, you don't want it to hide at all.
In this case, you have have 2 functions, a hider and a shower. Then on the menu node, you could say, on mouseenter, hider.cancel();shower(); and you would also say on mouseleave, shower.cancel();hider(); (in this case, you would give the shower a delay of 0 by default so that it always shows right away).
Type a long number here, and the validation will only happen once you stop typing for a small period of time.
Play demo
We call a tick function in an interval for 1 second that creates small tick marks. To show the difference, we have a function that creates highlighted markers that even though they're called the exact same number of times that the tick function is called, it executes at different intervals.
When you create a throttled function, it will fire every Xms no matter how many times it's called.
When you create a debounced function, it will wait until there's a pause of Xms to fire.