Oh, so you heard these terms and now want to get familiar with them, so you write good code. Both are must these days as people are getting impatient and click on buttons more than once. And if you have an expensive function then you won't want to call it a lot of times unnecessarily.

Let's Dive In

Debouncing

Debouncing is a technique that delays the execution of a function until a certain period has passed. This can be useful when we want to make sure a function is only executed once the user has finished acting.

Debouncing Explanation with Example

Let's assume, you have a search bar that calls an API whenever a user inputs something. Now you won't want an API call with just a letter. If the user wants to type in 'videos' then calling an API on each character will be expensive. So you would want to limit the call. And here you can limit it by using a debounce function.

Debouncing Code Example

const debounce = (customFn, delay) => {
    let timeoutId;
    const timerFn = () => {
        clearTimeout(timeoutId);
        timeoutId = setTimeout(() => customFn(), delay)
    }
    return timerFn
}

Debouncing Code Explanation

Our code over here will return the timerFn. And this can be called directly. Now, whenever our timerFn will be called on each input of the user. Each call will clear the setTimeout function and will set a new one in the way, the customFn will only be called when the user has stopped typing for the delay provided.

Throttling

Throttling is a technique that allows a function to be executed over a given period of time but allows it to execute immediately for the first time. This can be useful to restrict calling an expensive function multiple times unnecessarily.

Throttling Explanation with Example

Let's assume your web page has a button that likes a post. Now user clicks on it seven times continuously then as a good developer you won't want to call an API for a single task seven times. So you restrict it after the first call for a certain period of time using the throttle function.

Throttling Code Example

const throttle= (cutomFn, delay) => {
    let flag = true
    return () => {
        if (flag) {
            cutomFn()
            flag = false
            setTimeout(() => { flag = true }, delay)
        }
    }
}

Throttling Code Example

Here our throttle function returns a function that checks for the flag and if the is true then it does a few actions which include executing the customFn, changing the flag to false, and putting a timer for setting the flag back to true after a certain delay. So the customFn is executed on the first call as the flag is true and then after the delay when the flag turns true again.

Conclusion

These functions are used often, you would see their use cases a lot of time in your projects. So learn them as you use them. There are a lot of ways to write a function. Try writing them on your own and it will help you.

$$Thanks$$

• Thank you for reading.
• Your fellow developer would love to know about debouncing and throttling. Share this article with them.
• Your thoughts are precious. Preserve them in the comments and I would love to read them.
• Give reactions, your small *gesture will make my day.

Priyanshu