JavaScript: Debouncing | Flipkart UI Interview Question.

To understand this programming practice will go with a quick example.

We all do online shopping and we do search for products on Flipkart on the search bar.
So when we type on search bar i.e on every keypress we are actually giving API requests to the server, which in response gives us suggestions.

Actually, it's a time-consuming task and may degrade the performance of the webpage.
So to improve the performance we use debounce function which actually acts as a controller which reduces the API request to the server on keypress event.
In simple terms, we are giving API request only after a certain amount of time between two keypress events.

A debounce is a higher-order function.
Higher-order function: A function that returns another function.

Let's dive deep:

HTML Code:

<input type="text" onkeyup="searchProducts()"/>


Consider this as a search bar for Flipkart.
On any keypress, we are calling searchProducts() function.


Javascript Code:

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 () {
    let context = this,
      args = arguments;
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(context, arguments);
    }, d);
  }
}

Note: apply() method calls a function with a given this value, and arguments provided as an array.

const searchProducts= debounce(getData, 300);

Though the code is self-explanatory, Still I will  explain it.
Here we are passing getData() function and 300(milliseconds) as a delay as a parameter to debounce() function.

So instead of directly calling getData() function, we are calling it with a delay of 300ms.
Also here we are clearing the timeout every time when the function gets execute,
which will again restart the timeout() clearing existing one if it is present,
if not present means debounce() function was called after 300ms and getData() was executed after serving its 300ms delay.

So that's it! we have served our purpose of limiting the server called by debounce function. 
 
Live demo link with both examples (With and without debouncing): https://jsfiddle.net/joshiisaurabh/eurLq8b7/5/

If you still have some doubts you can ask me through comments or you can watch this video.

Video link:
https://www.youtube.com/watch?list=PLlasXeu85E9eV5xUEgrWUB8NAUvNZGsK0&index=1&v=Zo-6_qx8uxg&app=desktop

If you found this article helpful, please share your feedback in the comments section.
Subscribe this blog for more articles on Node.js and JavaScript.
You can also find me on Twitter or Linkedin.

Written By:
Saurabh Joshi