Debounce X Throttle
Tags: javascript, todayilearned
Published: 2019-12-11 14:27:50

![Duplicate event on hash change](https://i.imgur.com/OVALqbs.gif)

At work, I had to solve a problem of some **duplicate javascript events** and found that it was an url hash being changed awkwardly sometimes.
As always at programming, there are several possible solutions and I've chosen to implement a Debounce Function.

## Debounce x Throttle

Debounce and Throttle are both functions that help to limit the rate of callbacks being - well, - called.

### Debounce

![Debouncing](https://i.imgur.com/OeCow8i.gif)

**Debounce** awaits for a given **time of no action** to be triggered.
One example of this use case I when you only want to search for content after a person stopped typing (haven't typed for 1 second+). 

![Debounced input](https://i.imgur.com/F8Wln9E.gif)

![Debounce example](https://i2.wp.com/programmingwithmosh.com/wp-content/uploads/2019/03/debounce.gif?resize=750%2C248&ssl=1)


### Throttle

![ThrottleParrot](https://i.imgur.com/tazmuf1.gif)

**Throttle** has a **fixed time window** which it only accepts one action.
In the same use case, the content would be searched while the person is typing, but at every 1 second.

![Throttled input](https://i.imgur.com/Hu8DLIb.gif)

![Throttle example](https://i1.wp.com/programmingwithmosh.com/wp-content/uploads/2019/03/throttle.gif)

## Debounce and Throttle on Javascript

At their simplest forms (that I know), they're pretty much straight forward. Debounce it's a **Timeout that keeps resetting** and Throttle a **locked Timeout**.

```javascript
debounce: function(callback, wait) {
    if (this.timeout) clearTimeout(this.timeout);
    this.timeout = setTimeout(() => callback(), wait);
},
```

```javascript
throttle: function(callback, wait) {
  if (!this.isWaiting) {
    this.isWaiting = true;
    callback();
    setTimeout(() => (this.isWaiting = false), wait);
  }
}
```

Instead of having the callback triggered **after** the input, it's possible to adapt these functions with an **immediate** effect. However, this "feature" and other utilities can be imported from the [Lodash](https://lodash.com/docs/4.17.15#debounce) lib.

In fact, it's better and safer to use Lodash functions in your project if you need them. If you only need debounce and throttle, you migth run the following command:

```bash
npm i -g lodash-cli
lodash include = debounce, throttle
```

This tip was provided from [this article](https://css-tricks.com/debouncing-throttling-explained-examples/#article-header-id-1).


## Demo

To exemplify these functions, I've created a small Vue project which has both implementations. [This is the demo](https://click-limiter.markkop.now.sh/) and [this is the repository](https://github.com/Markkop/click-limiter/).

{% github https://github.com/Markkop/click-limiter/ no-readme %}


## Some use cases

- Window Resizing
- Hot Search inputs
- Repeating Events in general

## More about Debounce and Throttle:

* [CSS Tricks: Debouncing and Throttling Explained Through Examples](https://css-tricks.com/debouncing-throttling-explained-examples/)
* [Alligator.io: Throttling and Debouncing Events with Vue.js and lodash](https://alligator.io/vuejs/lodash-throttle-debounce/)
* [MatthewGerstman: Throttle and Debounce](https://www.matthewgerstman.com/tech/throttle-and-debounce/)
* [Walme Enginnering: Debounce and Throttle in Real Life Scenarios](https://medium.com/walkme-engineering/debounce-and-throttle-in-real-life-scenarios-1cc7e2e38c68)
* [Programming With Mosh: JavaScript patterns: Throttle and Debounce](https://programmingwithmosh.com/javascript/javascript-throttle-and-debounce-patterns/)