Debouncing

Debouncing: In very simple words, debouncing is just when the user makes any function to load lots of time but we deletes all the previous executions and just execute completely the last call. Debouncing is used to prevent a function from being called too frequently, especially in response to rapid user input or events.

it’s code looks like this:

function func(){
    let deounceFunc;
    return function(){
        clearTimeout(deounceFunc)
        deounceFunc = setTimeout(()=>{console.log("Hello")},2000)
    }
}
let debounceFunction = func()
debounceFunction()
debounceFunction()
debounceFunction()

Here we created a function named “func” and declared a variable inside it(because if we declare it inside the return function, then it will be “undefined” on every load and will not contain the previous time out function), and then we returned a function where we firstly cleared the previous time out function, so that if the function is called again between the delay time, then the previous time out function will be deleted, and then we finally returned a set time out function that prints “Hello” after 2 seconds.

Now, even If we call the “debounceFunction“ any number of times, it will output only once and all the previous calls will be deleted.

---

Uses of Debouncing

it is used in various situations like:

• when we wanna to search for “carrom” but we written untill the “car”, and it will show some car searches and when we just clicked on “o” then it have to clear the previous search and show searches related to carrom.

• In Buttons like “sign-up” where user filled the required fields and we need some time to verify it and check it on browser, and user is clicking continuously on this sign-up button and we don’t wanna to call for sign-up multiple times. etc.

---

Throttling

Throttling is just used when we wanna to stop the user from calling function until the previous one is completed successfully.

Its code looks like this:

function func(){
    let throttlingFunc = null
    return function(){
        if (throttlingFunc == null){
            throttlingFunc = setTimeout(()=>{
                console.log("Hello");
                throttlingFunc = null;
            },2000)
        }
    }
}
let throttlingFunc = func()
throttlingFunc()
throttlingFunc()
throttlingFunc()

We just created an function and initialized a variable with value “null”, and then we returned a function with a function that it will be executed only when variable value is “null”, and then we just declared the value of variable to a reference of a set time out function and finally declare the value of variable to “null”.

Now when the user calls this function, then it will run but when he tries to call the function again before even the first one is completed successfully, then because the variable is reference of set time out function, not “null”, it will not work until the previous one is completed.

---

Uses of Throttling:

• Prevent Excessive Updates: It is used to prevent excessive updates tried by the user of any data or page or content.

• Network efficiency: Throttling limits the number of API calls, reducing network traffic and improving performance.

• CPU usage: By limiting the frequency of function calls, throttling can help reduce CPU usage and conserve energy.

• Protecting APIs: API throttling limits the number of requests a client can make within a specific time period, preventing abuse and protecting the API from overload.

---

Hope you will found this blog Helpful. Make sure to hit on the like Icon only if found reading this blog really Helpful. Meet you next time, till that, Good Bye🙋‍♂️.