How to use a Debounce function in JavaScript

Updated onbyAlan Morel
How to use a Debounce function in JavaScript

If an event is particularly slow to occur, you can use a debounce function to prevent it from firing too often.

This can limit the number of times the event can trigger and therefore improve overall performance.

In this post, we'll take a look at how to use a debounce function in JavaScript.

How to use a debounce function

First, let's start off with an example event that fires often and can be taxing to execute:

JAVASCRIPT
window.addEventListener("scroll", () => { console.log("Expensive scroll event"); });

With this event listener registered, every time the user scrolls the page, the event will fire.

Let's now wrap this in a debounce function.

A debounce function is a higher-order function that will take your desired function as a parameter and return a new function that is controlled by a timeout.

Let'see our debounce function:

JAVASCRIPT
const debounce = (callback, delay) => { let timeout; return function debounced(...args) { clearTimeout(timeout); timeout = setTimeout(() => { clearTimeout(timeout); callback(...args); }, delay); }; };

Now let's use these together:

JAVASCRIPT
const debounce = (callback, delay) => { let timeout; return function debounced(...args) { clearTimeout(timeout); timeout = setTimeout(() => { clearTimeout(timeout); callback(...args); }, delay); }; }; const debouncedScroll = debounce(() => { console.log("Expensive scroll event"); }, 1000); window.addEventListener("scroll", debouncedScroll);

Now every time the user scrolls the page, the event will only fire after 1 second has passed, instead of every time the user scrolls.

Conclusion

In this post, we've covered how to use a debounce function in JavaScript.

Simply pass in a callback function and a delay in milliseconds to your debounce function and it will return a new function that will only fire after the delay has passed.

Thanks for reading!

To learn more about web development, founding a start-up, and bootstrapping a SaaS, follow me on X!
Copyright © 2017 - 2024 Sabe.io. All rights reserved. Made with ❤ in NY.