This is simple debounce and thorttle.

Usage no npm install needed!

<script type="module">
  import npmDebounceAndThrottle from '';


Debounce and Throttle


Debouncing works a little different. It can be a little harder to explain. With debouncing, it’s like “Hey, I’m not going to execute that function until I know there are no more changes inbound”. We don’t execute our function until everyone else is happy and we’re clear to proceed. Imagine ordering food at a restaurant. You start listing off items to the waiter/waitress and at the end they ask “Is that everything?” If it is, they leave you to it and go get your food and drinks. If it isn’t, you add to the order and then they ask you again until they are clear to proceed.


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 better analogy to be either the lottery, only one ball is drawn every five seconds. Or a better analogy being ordering drinks at a bar. You go to a bar and the barman has a policy of only allowing you to order a drink every 45 minutes (Or things get crazy). You order a drink in the first minute and they hand one over. You then try and order one every minute after. The barman denies you until the 45th minute when the then tired barman hands over the next drink. You won’t get another drink for another 45 minutes. With throttling, you may want one last invocation to happen after the throttle is over. This will be one of the denied invocations. Imagine you order a drink in the 15th minute and get denied. In the 45th minute, you don’t order but the barman sends a waiter over with the drink from that 15th minute order. They feel sorry for you 😁