Debouncing and Throttling

Debouncing and Throttling

Aakanksha Dhurandhar👩‍💻's photo
Aakanksha Dhurandhar👩‍💻
·

3 min read

In this article, we see debouncing and throttling with the help of code examples and use cases.

start

Debouncing

A common use case of debouncing is the search bar on a website. When we type something in the search bar, it makes an API call to fetch data from the server related to entry in the search bar.

Let us understand with the help of examples.

Let us implement API call without debouncing.

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>Document</title>
</head>
<body>
    <input type="text" onkeydown="APIcall()"/>
   <script src="concepts.js"></script>
</body>
</html>

concepts.js

var countervariable=1;
function APIcall(){
    countervariable=countervariable+1;
    console.log("Aaku",countervariable)

}

output:

Screenshot from 2021-06-12 19-20-56.png

Screenshot from 2021-06-12 19-21-04.png

In the above code sample, we see that APIcall() function is called every time the user searches something in the search bar. Imagine having millions of users and millions of searches. Then we will need to make billions of call to API which is not possible. This is where debouncing comes into sight.

In the debouncing technique, no matter how many times the user fires the event, the attached function will be executed only after the specified time once the user stops firing the event.

For example, if one APIcall() is called at the starting of the event next APIcall() will be called after 300ms only.

Screenshot from 2021-06-12 19-43-01.png

Now let us see code for debouncing:

// Debouncing in Javascript
let counter = 0;
const getData = () => {
  // calls an API and gets Data
  console.log("Fetching Data ..", counter++);
}

const debounce = function (fn, d) {
  let timer;
  return function () {
      /*
            1) Assign `this` to a variable named `context` so that the 
               `func` argument passed to our `debounce` method can be 
               called in the proper context.

            2) Assign all *arguments passed in the `func` argument of our
               `debounce` method to a variable named `args`.

       JavaScript natively makes all arguments passed to a function
            accessible inside of the function in an array-like variable 
            named `arguments`. Assigning `arguments` to `args` combines 
            all arguments passed in the `func` argument of our `debounce` 
            the method in a single variable.
        */
    let context = this,//1
      args = arguments;//2
    /*
    When setTimeout is called, it returns a numeric ID. This unique ID
        can be used in conjunction with JavaScript's `clearTimeout` method 
        to prevent the code passed in the first argument of the `setTimout`
        function from being called. Note, this prevention will only occur
        if `clearTimeout` is called before the specified number of 
        milliseconds passed in the second argument of setTimeout have been
        met.
    */
    clearTimeout(timer);
    timer = setTimeout(() => {
      getData.apply(context, args);
    }, d);
  }
}

const APIcall = debounce(getData, 300);

Output:

Screenshot from 2021-06-12 19-50-21.png

Screenshot from 2021-06-12 19-52-39.png

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.

Screenshot from 2021-06-12 20-11-24.png

The code of throttling :

index.html

<!DOCTYPE html>
<html lang="en">
<head>

    <title>Document</title>
</head>
<body>

    <button onclick="handleClick()">Click me</button>

<script src="concepts.js"></script>
</body>
</html>

concept.js

function throttle(func, delay) {
    let isRunning;
    return function() {
      if(!isRunning) {
        isRunning = true;
        func()
        setTimeout(function() {
          isRunning = false;
        }, delay);
      }
    }
  }

  function myFunc() {
    console.log('Called');
  }


  let throttleFunc = throttle(myFunc, 300);

  function handleClick() {
    throttleFunc();
  }

Output:

Screenshot from 2021-06-12 20-27-18.png

Screenshot from 2021-06-12 20-27-11.png

handleClick() function is called when we click the button for the first time, it then sets isRunning as true.isRunning is turned false only when setTimeout() has worked for 300ms.

Both throttling and debouncing are used to rate limit/optimize the function call.No one has an advantage over others. It completely on a use case to either use debouncing or throttling.

That's it for this article Thanks

JavaScript