System design: Debouncing vs Throttling

Both debouncing and throttling are programming practices used to control the number of times a particular task should be fired. For instance, you can decide when the function should be called on a button click and how many times it should be called in a given time interval.
Debouncing and throttling can be easily differentiated by their implementation details which we are going to go through.

Debouncing

A very practical example of where debouncing is handy is an autocomplete search functionality on the frontend. If you want to search through the data from the backend, it would not be wise to hit the server every time the input value changes. You should at least wait a few seconds after the user stopped typing and send a request to search through the backend data.
Let’s see how to implement a very simple debouncing function.

const debounce = (func, delay=100) => {
  let timerID = null;

  return function(){
    const context = this;
    const args = arguments;

/* Clearing the timeout will cancel the pending executions of                  the callback function  
*/
    if(timerID) {
      clearTimeout(timerID);
    }
/* Setting the timeout will line up a future execution of the callback function wich can be cancelled again when the function get's called before the delay time ellapses
 */
    timerID = setTimeout(() => {
      func.apply(context,args);
    }, delay);
  }
}
// We can debounce our functions like this 
const functionToDebounce = () => console.log('Hello!');
const debouncedFunc = debounce(functionToDebounce,1000);
/* And when we call it multiple times like this, it will always cancel the previous execution whenever it gets recalled in less than the delay time.
*/
debouncedFunc();
debouncedFunc();
debouncedFunc();

Throttling

One of many examples of which throttling would be used is a function that gets executed when a button to resend verification SMS to the user is clicked.
Knowing that the SMS service that you are using might be costly, it’s not a good idea to send the SMS whenever the user clicks on the resend button. Instead, you can limit the number of times that button should be clicked in a particular time interval. Let’s say once in 3 seconds.
This is how a simple throttling function can be implemented.

const throttle = (cbFunction,delay=100) => {
  let lastCallTime = 0

  return function () {
    const args = arguments
    const context = this;
    const now = new Date()

    if(now - lastCallTime >= delay) { /* Call the function after the delay 
*/
      cbFunction.apply(context,args);
      lastCallTime = now; // update the lastCallTime
    }
}
}
// Throttle our function to log hello in the console.
const throttledFunc = throttle(() => console.log('Hello'), 3000);
/* No matter how many times you can call it in 1 milleseconds the function will be called only after 3000 milleseconds have ellapsed */
setInterval(throttledFunc,1)

Now that we have seen the basic implementations of both debouncing and throttling, I hope you will always remember to use them to create performant applications.
Thanks for reading, feel free to make suggestions, like, share with your friends, and follow us for more interesting write-ups.