All you need to know about Debouncing and Throttling in JavaScript

All you need to know about Debouncing and Throttling in JavaScript

Debounce and throttle are two techniques to enhance your website performance by controlling how many times we allow a function to be executed over time.

Generally, it's the developer that decides how many times or when a function will be executed. But in many cases, the developer has to give this ability to the users.

For example, functions attached to events like button click, mouse move, and window resize allow the user to decide when to execute them and how many times to do so. And most of the time users may perform these actions more frequently than is required. This may not be good for the website's performance, especially if the functions attached to these events perform some heavy computation and result in a large response time. In such cases, where users have control over function execution, developers have to design some techniques to restrict the number of times users can execute the function.

Here, techniques like Debouncing and Throttling come into the picture. Though they both are similar in what they tend to achieve, they are different in their approach to solve the problem.

Let's look into them, one by one.

Debouncing

The debounce function delays the processing of the key event until the user has stopped triggering events for a predetermined amount of time. It batches a burst of events and triggers a single event.

Let's try to understand it using an example:

Let's imagine we are in an elevator. The doors are beginning to close, and then suddenly another person enters through the door, The elevator then cancels its function to change floors and reopen the door. This keeps happening until no person will enter through the door for a specified time. Here the elevator is delaying its function to change floors but it's optimizing its time and resources. If not this, then the elevator would have to come back again to that floor to pick up that person.

Now let's understand it in terms of javascript

Suppose there is a search bar that fetches the response from an API on the onChange event. Now every time when a user types something in the search bar, there is an API call.

For example, If a user is searching for "JavaScript", then there will be an API call for each letter entered, which means, there will be a total of 10 API calls, which is a total waste, we just need one API call to search for a word.

This issue can be optimized using Debounce, we will not fetch the API until there is a significant pause between two simultaneous key events of a user. That is only when the user stopped typing or paused for a significant amount, we will fetch the API. Let's look at the code below:

const fetchAPI = () => {
  // calls an API and gets Data
}

const debounce = function (func, delay) {
  let timer;
  return function () {
    args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      func(...args);
    }, delay);
  }
}

const optimizedFetchAPI = debounce(fetchAPI, 300);

Here, see every time on the new event first the previous timer will be cleared and then a new timer will start, and only will be called if there are no key events for a time delay. Hence, we have optimized our API call to a great extent. Debouncing is nothing but this.

Now let's find about Throttling

Throttling is a technique in which, no matter how many times the user fires the event, the attached function will be executed only once in a given time interval. Only the first event is triggered immediately.

Till now, we understand that throttle and debounce both tend to achieve the same result but with a different approach. But why this different approach, because both are meant to be used in different scenarios. We have seen the implementation of debounce function in the search bar, but what if debouncing was applied on a button click, suppose the user continuously keeps pressing the button but will see no result until he stops pressing it, which is a kind of absurd.

So in this type of scenario, throttling comes handy, because it always triggers its first event.

Throttling will only execute one event in a particular time interval. Let's look at the code below:

const fetchAPI = () => {
  // calls an API and gets Data
}

const throttle = (func, limit) => {
  let flag = true;
  return function(){
    let args = arguments;
    if(flag){
      func(...args);
      flag = false;
      setTimeout(() => {
        flag=true;
      }, limit);
    }
  }
}

const optimizedFetchAPI = throttle(fetchAPI, 300);

Here, no matter how many times you trigger the event, the func will not be called until the flag is false, which only be true after a time limit. Hence throttling is achieved.

This is the prime difference between debouncing and throttling. There is no one better between throttling and debouncing, both of the techniques have their importance depending on the scenario.

Thanks for reading, If you liked it, give your reactions and comment down below, and also share this blog!