Debouncing and throttling in JavaScript

I have devoted somewhat 30 to 35 days studying JavaScript and still i am not pro at it. But i am finding a bit interesting and amazing. I have written many articles on JavaScript and still writing. Here in this post there are some fundamental things in JavaScript a beginner must know. You'll get confused at start but afterwards you'll be a PRO.

---

In order to limit how many times a function should execute we use "Debounce" & "Throttling"

There are times when we give the control in user's hand as to how and when a function should execute such as scrolling and search bar. This can hamper the performance of our app. This is when these techniques come in handy.

Debouncing

In this, no matter how many times an event is fires the function executes only after the specified time when the user stops firing the event.

Throttling

In this, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval.

Let's hunt them in detail

---

Debouncing

Consider an example, you can an API as the user types in searchbar. Now if you send the API call as soon as the user starts typing you will end up making an API cal multiple number times within a short time period. So to overcome this, we use debouncing.

Let's understand this with an example

function makeAPICall(){
    //call the api
}
function debounce(){
    var timerId;
    if(timerId){
        clearTimeout(timeId); 
    }
    timerId=setTimeout(makeAPICall,1000); 
}

So whenever the user fires an event we will call our debounce function and if before the setTimeout executes the user types in something, the previous timeout will be cleared. Thus, our API will be called only after 1000ms when user stops typing. That's "debouncing".

Throttling

Let's say we want to make an API call when the user clicks on a button. Now it's possible that the user clicks multiple times only in fraction of seconds and we end up making API calls every time. To handle this, we use "Throttling".
Let's seen an exmaple and understand :

function makeAPICall(){
    //call the api
}
function debounce(){
    var timerId;
    if(timerId){
        clearTimeout(timeId); 
    }
    timerId=setTimeout(function()){
      makeAPICall();
      timeId=undefined)  
    } 

Here whenever the user fires an event we will call the throttle function where at first the timeId is undefined thus our setTimeout function will be scheduled. Now if within that time user again clicks it will do noting as the timerId will be undefined again only when setTimeout function has finished. This is "Throttling".

When you'll need them?

Debouncing and throttling are recommended to use on events that a user can fire more often than you need them to.

Points to remember:

• Debouncing and throttling are not something provided by JavaScript itself. They're just concepts we can implement using the setTimeout.
• The main difference between throttling and debouncing is that throttling executed the function at a regular interval, while debouncing executed executed the function only after some cooling period.

---

⌛Thanks For Reading | Happy Coding ☕

Many credits - Telerik - Blog