Debouncing & Throttling

Debouncing & Throttling are the techniques to optimise the system. Basically these are used to prevent the too much function calls. let discuss one by one.

Debouncing:

Let suppose a situation, that we have system where we are searching the product, and making the Api calls whatever user types on input box, so let suppose he types “mobile”, So normally there will be 6 Api calls. which looks like,

http://SomeDomain/?queury = "m"
http://SomeDomain/?queury = "mo"
http://SomeDomain/?queury = "mob"
http://SomeDomain/?queury = "mobi"
http://SomeDomain/?queury = "mobil"
http://SomeDomain/?queury = "mobile"

So if our will look like this, this will leads to performance issue,

So the solution is to apply here Debouncing technique , so lets say when user takes a pause of certain time ie 300ms, then only we will call that Api. This is same like when someone is asking something to us, we don’t reply immediately ,we reply when he takes some pause.

Code implemenation:

<html>
 <body>
   <input type="text" id="input" onchange="debounce">
   <script>
    getData(){
    var value = document.getElementById("input").value;
    fetch("http://SomeDomain/?queury=" +value).then(res=>{
        // Showing products logic here
     })
    }
    
    var flag;
    
    function debounce(){
     clearTimeout(flag);
     flag = setTimeout(()=>{
        getData();
     },300)
    }
  </script>
 </body>
</html>

In this code , whenever user will type , the Api will called after 300ms . if user doest’t take pause of 300ms & continue typing, code will clear the previous timer and will make new timer of 300ms. So in this way the Api will only called when user takes pause of 300ms.

So by applying Debouncing here , it reduces number of Api calls.

Throttling:

Let suppose a situation, we have Shooting game, so when we press button, it’s need to fire . Also the guns have some reload time ie 500ms. So if user press 5 times that button immediately, it should fire only once instead of 5 times, Next fire should allowed only after 500ms.

So here we can use concept of Throttling.

Code implementation:

<html>
 <body>
    <button onclick="throtlle">Fire</button>
    <script>
        var allowed = true;
        function fire(){
            //fire logic goes here
        }
        function throtlle(){
        if(allowed){
            fire();
            allowed = false;
            setTimeout(()=>{
                allowed = true;
            },500)
        }
        }
    </script>
   </body>
</html>  

In this code, it will check if “allowed” is true, it will call fire function , and then it make “allowed” to false and set a timer of 500ms to make it again true.

So in this case, if someone press button before that time, it will not call the fire function because “allowed” is false, and after completing 500ms it will again set it to true, then user will able to fire.

Difference between Debouncing & Throttling:

In Throttling time to wait is always constant, no matter how many times we press that button , it will always allow to call the function after completing that specific time,But in case if Debouncing , if we press button before that specific time then we have to again wait for whole time limit not the remaining time.

Let say we type “a” and after 100ms we type “b” then waiting time will again 300ms not 200ms(300ms — 100ms). But In case of Throttling, waiting will be the remaining time.