*In my [previous article](https://hackernoon.com/optimizing-performance-with-throttling-in-javascript), I talked about* `throttling`*. This time, we will look at the* `debounce` *function and how it differs from* `throttling`*.*

## How to Use Debounce

Using `debounce`, the function will be executed only when a certain amount of time has passed since the last function call. The delay starts again with each new call. 

\
For instance, if you set a debounce with a time of 100 ms to the `onscroll` event, then the function will be executed 100 ms after the scroll stops.

\
Another example of using `debounce` is sending AJAX requests to the server. Let's say there is a search field on the website and you need to send requests after the user enters a request, and at the same time, limit the sending of requests for each character pressed. 

\
In this case, you can use `debounce`, and set the time interval after which the request will take place. For example, by setting 1000 ms, the request will occur only after the pressing speed has exceeded 1 second.

\
Schematically, it can be displayed in the following way:

 ![Debouncing schematically](https://cdn.hackernoon.com/images/Gp8uHyvp6hehmnC1gXMD6uAheaF2-5093rrk.png)

\
Just to compare, I’ll duplicate the `throttling` scheme from the [previous article](https://hackernoon.com/optimizing-performance-with-throttling-in-javascript):

 ![Throttling schematically](https://cdn.hackernoon.com/images/Gp8uHyvp6hehmnC1gXMD6uAheaF2-cda3r45.png)

\
Many JavaScript libraries such as *lodash*, *underscore*, and *rxjs* provide `debounce` and `throttle` methods with various additional features. Below you can view an implementation of the `debounce` method:

\
```javascript
const debounce = function debounce(fn, time) {
    let timeout = null;
    return function () {
        const context = this;
        const args = arguments;
        const later = () => {
            fn.call(context, ...args);
            clearTimeout(timeout);
            timeout = null;
        }
        clearTimeout(timeout)
        timeout = setTimeout(later, time);
    }
}
```

\
`Debounce` is a higher-order function that takes 2 arguments: a main function and a timer. You can learn more about higher-order functions in our series of articles about [functional programming](https://hackernoon.com/higher-order-function-in-javascript-with-es6-examples).

\
Each function call updates the timer. When the timer expires, the function is executed. For instance, let's write a simple window resize event handler, just like we did in the `throttling` article:

\
```javascript
const handleResize = () => {
    const { innerHeigh, innerWidth } = window;
    console.log({ innerHeigh, innerWidth });
}

window.addEventListener('resize', handleResize)
```

\
Let's wrap the handler in the debounce function, and then make sure that the function is called only once:

\
```javascript
const handleResize = () => {
    const { innerHeigh, innerWidth } = window;
    console.log({ innerHeigh, innerWidth });
}

const handleResizeDebounced = debounce(handleResize, 500);
 
window.addEventListener('resize', handleResizeDebounced);
```

\
The above example makes almost no sense in practice. The main thing is to understand the logic, and that the purpose of the `debounce` and `throttle` functions are to reduce the load on the browser by reducing the number of calls.

## Debounce Use Cases

General `debounce` use cases are as follows:

\
**Browser window resizing:** Let's say that when resizing the browser window, some dynamic elements are redrawn, which ends up with complex calculations in many cases, so here we can take advantage of both `throttle` and `debounce`. 

\
The `debounce` optimization will be more significant since the function call will only take place when the user has finished resizing the browser window; while with `throttle`, the passed function will fire in the process of resizing after a given timeout.

\
**Reducing the number of AJAX requests:** For instance, when entering a request in a search field, use the `debounce` function in the corresponding event handler with a delay of 200 milliseconds. 

\
Thus, the request will not be sent to the server after each letter is entered but will be sent once after the user stops entering a query and only after 200 milliseconds.

## Choosing a Function Depends on the Task


1. If you need the function to be executed at a certain frequency during any action (resize, scroll, keydown), use `throttle`

   \
2. If you need to call a function at the end of some action, it’s better to use `debounce`

   \
3. If a function call is required at the beginning of an action, then we use `debounce` with an additional immediate call parameter

## Conclusion

This article describes how the `throttle` and `debounce` functions work and how to use them.

\
You may not fully understand the logic of the `throttle` and `debounce` functions at first, but it will be a huge advantage to use these functions during development, as this reduces the load on the browser, and therefore on the user's device.

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Too Long; Didn't Read

Cassandra Forward a free Cassandra-focused community event

Eliminating Event Storms With Debouncing in JavaScript

Too Long; Didn't Read

@marat

Credibility

RELATED STORIES