Debouncing With Code

Debouncing With Code

Introduction to Debouncing and its need

The aim of debouncing is the optimize the performance of the browser. Let us take the example of the amazon website. When we start writing the name of the item we are looking for, internally what happens API calls are made over the network to search the Amazon database and then get the required item. This is a very costly operation because every time we press a key the API will travel back and forth through the database We don't want the API calls to happen every time we enter an alphabet, instead what we want is the API call to be made when we stop typing. This will considerably reduce the number of network calls which are being made. The word debouncing comes from circuit theory, which is to debounce a switch it basically means is to reduce the fluctuation in the circuit.

Screenshot 2022-10-07 201233.jpg

The highlighted part in the image is the denounced signal.

settimeout() and its return value

This will start a timer and will call the callback passed inside the settimeout after the delay has expired.

cleartimeout()

settimeout returns a positive integer when it starts, once we clear this positive value then by default the value of settimeout becomes zero, or in other words we kind of refresh the timer

How to write a Debounce function

We know that we want to modify the original function to do something and then return back the debounced function. Hence we can conclude that we will be returning a function. The whole idea is to keep on clearing the timeout on the key press, if the key press happened after the delay passed then we will call the callback function passed But why to do this , we will kind of use the timerid returned as the host of the function. What we mean is that on every call of the settimeout we will store the timerid in a global variable and then we will pass it into the clear timeout. EXAMPLE: The first time we called the debounce function then its timer would be set which will have a value 1 in the timerid. In the second call here is the important part of the function: We already have the timer id of the previous settimeout .If the time difference between the second call and the first call was equal to delay we would have called the callback function with timer id 1. But if the time difference between the second and first call is less than delay We don't want to call the callback now but we want the timer to start again.Hence we will clear the settimeout

How to achieve the concept of storing a variable in between a function call without declaring it globally?

The answer is we will use the concept of closure to achieve this. The closure will maintain the state of the variable as it is present in the lexical scope of the outer function.

The this binding?why do that explicitly?

The problem with free flow functions like settimeout is that it will set the this of the callback to the window object but, however the this should be the reference to the execution context where it is invoked

So what happens if we do not bind the this explicitly?

EXAMPLE :

this1.jpg

The above function is the denounced version

this2.jpg

The output should be My name is amy.But we get My name is undefined.The reason is the this binding

There are other ways of this binding as well why to use apply?

We use apply for the this binding because it has another parameter which is the arguments passed. call and bind do not have the option for other parameter.

Debounced Function with code

Screenshot 2022-10-07 212912.jpg

Which Scenario to use debouncing?

EXAMPLE: a button is clicked and API call is made click1,click2,click3 wait(greater than delay hence make a call)