Learn debouncing and throttling in a simple way
Published: 2022-09-26 10:14:10

---
title: Learn debouncing and throttling in a simple way
published: true
canonical_url: https://weekendtutorial.com/debouncing-and-throttling-unboxing-js-perf/
---

If you’re a frontend developer you must have handled the various events like `button clicking`, `form submit`, and `window scroll events`, etc through `event handlers`.

Some events are lightweight and don’t interfere with the `UX behavior` but some are just the opposite of it, for instance, it is strongly advised to not attach any event handler on the window `scroll event` or `resize event`.

The reason is in comparison to other events, depending on the browser and the device the scroll event can fire a lot, which places lots of `scroll callbacks` into the `callback queue` and `call stack`. Thus, the page becomes unresponsive and not scrollable.

The two widely known techniques that solve the above problem are —

1. Debouncing
2. Throttling

Let’s see how debouncing and throttling helps to solve the above problem and other use cases also.

---

## What is Debouncing?

Debounce technique can be understood by a `timer`. When the button is pressed the timer started. If the button is pressed again before the timer expires, the timer is reset. This ensures that the button can only be registered as being pressed `once per debounce period`.


![debounce - grouping the multiple calls to one](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5xxiwangsfv5cpn1uhqy.png)

Let me take another example, `the elevator`

Imagine you’re in an elevator and the door is about to close. But, just before that another person comes in, the elevator door opens again. Now it waits for another person for a specific time and if no one comes door is closed. So, we see the timer reset on the new call and `“group” multiple sequential calls into a single one`.

Other use cases  — 

- SearchBar 
- Autocomplete feature
- Auto-saving user input
- the clicking of a button that makes API calls

### Implementation of debouncing

Let’s create an `index.html` file having an input field.

On `keypress`, we suppose to call an API. Let’s handle this behaviour by debouncing.

{% embed https://gist.github.com/ajayv1/9002f5785be93f69df2217dfa7ff73ac.js %}

and debounce.js –

{% embed https://gist.github.com/ajayv1/396d4e8f964063f199e481059063a35c.js %}

if you check the `console`, you will find that the no. of time the event handler called is way less than the actual input size. And thats the big performance boost!

---

## What is Throttling?

Throttling technique can be understood by a `counter`. When the button is pressed the counter is incremented. Now till the counter reaches a certain threshold all button pressing is ignored. This limits the number of times the button can be registered as being pressed in a given period of time.


![throttle - calling func at a fixed interval](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/av5uconvgyw7wgb93wsf.png)

Other use cases — 

1. **Shooting game** — Pistol takes 1 sec time between each shot but the user clicks the mouse button multiple times. 
2. Infinite scrolling

### Implementation of throttling

Let’s update the above `index.html` file with a button.

On the `button click`, we suppose to call an API. Let’s handle this behaviour by throttling.

throttling.js –

{% embed https://gist.github.com/ajayv1/70eeb22039b6fc94e15260821c771ba4.js %}

We can see that button handler will be called at `each 500ms` and all the button click within this window is ignored.

---

As we have seen the performance benefits of using the `debounce and throttle`, based on your use case, you can use it in your code base.

_**Note:**_

`Underscore and Lodash.js` libraries also have the debounce and throttle method, you can check that as well.

If you want to know how to create a javascript object, please check –

https://weekendtutorial.com/what-is-object-in-javascript-and-how-to-create-it/

https://weekendtutorial.com/how-to-implement-binary-heap-in-javascript-in-2022/

## References

[Twitter scrolling issue in 2011](https://johnresig.com/blog/learning-from-twitter/)