Imagine you put an event listener to scroll event but calling only once a second is enough. But during scroll you are getting this event like 100 times a minute. Use Here debounce and throttle to filter out these unwanted events.

I prefer to use the builtin function of Lodash to do this. You can also make this yourself.

Throttle

Definition: Having a time limit for calling a function. Within this limit it can be called only once

Lets look at this example without throttle

const scrollListener = () => {
  console.log("handle scroll event");
};
document.addEventListener("scroll", scrollListener);

Once you scroll this will be fired 100 times or more when you are scrolling 🤪. Maybe you needed this event only once.

The Solution Throttle

import _ from "lodash";

const scrollListener = () => {
  console.log("handle scroll event");
};
// this will fire only once in 100ms
document.addEventListener("scroll", _.throttle(scrollListener, 100));

Debounce

Definition: Call a function only if it has not been called in last 100 ms (time window).

import _ from "lodash";

const scrollListener = () => {
  console.log("search for results");
};
// after first key press from user, this will wait for a
// time of 100ms where user didn't press any keys
document.addEventListener("press", _.debounce(pressListener, 100));

Difference

Its a little bit tricky sometimes to understand to difference.

Throttle puts a limit within a timewindow where Function will be called only once. Debounce call a function only when in last window time there was no other call.

Source

1. https://stackoverflow.com/questions/25991367/difference-between-throttling-and-debouncing-a-function