Debouncing and Throttling

1. Debouncing

Debouncing - It limits the execution of a function call and waits for a certain amount of time before running it again.

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.

<input type="text" id="search" onkeyup="myFun()" autocomplete="off" />

function myDebounce(fn, d) {
   let timer;
   return function (...args) {
     if (timer) clearTimeout(timer);
     timer = setTimeout(() => {
       fn();
     }, d)
   }
 }

 let counter = 1;
 const myFun = myDebounce(function() {
   console.log("Working!! ", counter++)
 }, 3000);

We've added onkeyup event on <input> tag so whenever we type something this event will be fired and it will trigger the myFun() function.

myDebounce() function takes two arguments so we passed two arguments that is 1st callback function and 2nd delay. myDebounce() function is returning another function so we have to store that somewhere, so we stored that function in myFun, and we are calling this function whenever the user is typing.

What is happening when myFun() is calling?

1st we checked, is any time attached with setTimeout? if attached then clear that time and start again from the beginning. Then the setTimeout's callback function will execute after a given time (that time we are passing as an argument to myDebounce), and after executing that callback the fn() function will be called (this function we are passing as an argument to myDebounce).

So if I type something in input and if I wait for 3 seconds only when the fn() function will be triggered.

E.g

Suppose I type "A" and wait for 3 seconds then the function will be executed.

And Suppose I type "A" and before completing 3 seconds I again type "pple", so first, the previous timeout will be cleared then again new time will be added, and then it'll call that function after 3 seconds of "e", not for every letter.

If 3 seconds have been passed after typing "e" then it'll call the function,

---

2. 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.

<button onclick="newFun()">Button</button>

const btn = document.querySelector("button");
function myThrottle(fn, d) {
  return function (...args) {
    btn.disabled = true;
    setTimeout(() => {
      fn();
    }, d)
  }
}

let counter = 1;
const newFun = myThrottle(function () {
  btn.disabled = false;
  console.log("Throttling ", counter++);
}, 4000)

Suppose we have a 1 button and after clicking on that button we are sending the data to database, but If someone clicks on that button twice or thrice then the entry will go twice or thrice but we don't want that so we use throttling.

Here If I click on a button then 1st the button will be disabled until 4 seconds because the setTimeout takes 4 seconds to delay so after 4 seconds when that fn() function will call then the button will enable.

So If I click on the button the button will be disabled until the fn() calls, so in between these 4 seconds if I click on the button 4/5 times nothing will happen the function will run only 1 time after click.