Debouncing and Throttling in JavaScript

Hi, Debouncing and Throttling concepts are little bit hard and confusing for anyone who is trying to understand first time. Some time I get confused with the logics that which one called debounce and which logic called throttling.

So here I am trying to write few things so that we can remeber it always. Followings are few real life examples of debouncing:

• When we press a electronic button, like TV remote button, there are chances that it gets pressed multiple time in micro/mili seconds, but there is debouncing logic there so that multiple times button pressinga are ignored for those micro/mili seconds, so input gets considered only for once, other signals get bounced
• One more real life example I would like mention. If you have ever used or seen hand dryer in some place, it uses debounce. Let me explain, when you place your hand in it then it starts running, now if you get your hand out for few seconds, it still runs and if you place your hand in that again then it continues running. So what is happening here, hand dryer has a sensor which check if your hand is in the dryer or not in few seconds(suppose 3 seconds). When you take out your hand from dryer it wait for 3 seconds to switch it off. If you place your hand again say after 2 seconds then action to switch off is canceled. So whenever you take out hand hand action for close is registered and it will get closed if not detect hand for 3 seconds. Suppose if we have done the programming for this in JS then it would be like this:

  Placing image for reference

  

  First basic version will be like below where no debouncing is used:

        // method to switch off dryer
        switchOff(){ 
       	// ....some code
        }
        // method to switch on dryer
        switchOn(){
        	// ....some code
        }
        
        addEventListener("handOn", switchOn);
        
        addEventListener("handOff", switchOff);
        
      

  In this scenario it will be very jerky in switching on and off when user's will use dryer as we move our hands during drying. Now let's see how we can improve this?

        var timerId;
        // method to switch off dryer
        switchOff(){ 
       	// .... some code
        }
        // method to switch on dryer
        switchOn(){
        	// .... some code
        }
        
        addEventListener("handOn", function(){
        	clearTimeout(timerId);
          switchOn();
         );
        
        addEventListener("handOff", function(){
          clearTimeout(timerId);
        	timerId = setTimeout(function(){
  	        switchOff(); 
          }, 3000);
        });
      

  In the above code we are clearing the previuos action if it occurs before 3 seconds, that is called debouncing

• One more example I would like to mention here, suppose there is one child and he is demanding cake from his mom. Now mom do not want to give the cake whenever he demand, but mom said if you keep quiet for 30 mins then you will get the cake. So if child is quiet for 30 mins atleast then mom give him a cake, but he makes noise in between then counter is again reset. So this is also a debounce condition for giving the cake if child make noise

Throttling

One example of throttling by which you can understand it:

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!