Debouncing is generally a concept in javascript to improve the performance of a web app. It is just not an important interview question but it is quite helpful while developing web apps. Majorly while developing a customer-facing web app your web app needs to be very performant. Your website should not freeze while the user is doing something on the browser.
In simple words, we can say that the debounced function() makes sure that the code is triggered only once for the input given by the user. Generally what happens is if you excessively invoking of a particular function then the function generally hampers the performance of the web app. Both debouncing and throttling helps a javascript developer to get control over the rate at which the function invocation or execution happens.
The exact explanation of Debouncing in Javascript
In general debouncing is a method or a way to execute a function when it is known that no further event will be triggered in a given interval of time.
A technical example of this concept will be a search functionality on an ecommerce website where a search functionality is there and you don’t want to trigger a search function and make a request to the server each time as the user keeps typing each letter.
index.html
script.js
In the above example, we have created a basic HTML page in which we have created an input box. We have also used onkeyup event in the input which calls a method getData(). This getData method will get data from the server or the hidden API and feeds the data.
In the javascript file, we have created a getData method that calls an API and gets the data. We can implement the logic of making a network call and getting the data according to the search queries. For now, we are just writing console.log and we can put the text Fetching Data in it. For distinguishing between the events we have used the counter variable. This will generally help us to visualize the data.
When I typed laptop in the search box then we can clearly see in the console that the API call was made 6 times. We are trying to achieve a use case where the when the user pauses while typing then only the API call should be made.
Without calling this getData method again and again. We should create a betterFunction which should actually dosomeMagic onto our getData method. It should do someMagic and not call our getData method in each and every keystroke. Rather it should call when the user is paused while typing. If the difference in time is greater than 300 ms then only we need to call the getData method. Only doSomeMagic will call the getData method when the difference of time is greater than 300ms or 300ms.
Now let us write doSomeMagic method which will return me a function again. Let us make it an anonymous function. This function will be the betterFunction(). And this betterFunction() will be called on the keyup. Instead of calling the getData method which will be called again and again we will wait for sometime which is the delay and then we will call that function.
The delay is achieved by using the setTimeout() method.
