Skip to main content

JavaScript: Debouncing | Flipkart UI Interview Question.

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

Comments

Popular posts from this blog

Node JS:Understanding bin in package.json.

Well as a Node Js developer we know package.json as dependency file where we keep a note of all dependencies of our project. Here we will be looking at what is bin in package.json? To understand this we first need to understand command line application and it's purpose. CLI applications are mostly used to automate things such as deployments of application,running tests,building reports and the list goes on and on. So lets start with creating our first CLI application. First, let’s make sure you have the tools required. To complete this tutorial, you will need the following: 1)A recent version of Node.js downloaded and installed 2)A good text editor, such as Visual Studio Code Next, open your computer’s command prompt (Windows) or terminal (macOS/Linux). Change the current directory to the folder where you save your documents or projects. Enter the following commands to create a new project folder and initialize the project. mkdir hello-cli cd hello-cli npm init Nex

Node.js: Extract text from image using Tesseract.

In this article, we will see how to extract text from images using Tesseract . So let's start with this use-case, Suppose you have 300 screenshot images in your mobile which has an email attribute that you need for some reason like growing your network or for email marketing. To get an email from all these images manually into CSV or excel will take a lot of time. So now we will check how to automate this thing. First, you need to install Tesseract OCR( An optical character recognition engine ) pre-built binary package for a particular OS. I have tested it for Windows 10. For Windows 10, you can install  it from here. For other OS you make check  this link. So once you install Tesseract from windows setup, you also need to set path variable probably, 'C:\Program Files\Tesseract-OCR' to access it from any location. Then you need to install textract library from npm. To read the path of these 300 images we can select all images and can rename it to som

Node.js: Bundling your Node.js application to single executable for Windows.

In this article, we will see how to bundle Node.js application to a single executable for Windows. What's the need? Well recently, I had taken a work where I needed to convert pdf's(Of similar format) to excel sheet. So I was reading the pdf's from a folder in desktop and I was storing the output excel sheet into a separate folder on the desktop. I used Node.js for the program. Now the client wanted it to install the program on 25 windows machine and his budget was really low. So it was also not possible for me to install node.js for 25 machines and then install the required dependency for each one. One of the solution: While I was searching for an easy solution I found this amazing npm module pkg . This module can make your node.js app work like plug and play type. No need to install Node.js on the client machine or any other dependency.  It helps to make a commercial or trial version of your node.js application without exposing the source code. I found