Skip to content
Home / Blog / JavaScript Debounce Function

JavaScript Debounce Function

When listening for events or actions on a page that may occur in rapid-fire succession, a JavaScript debounce function is a common solution. This improves performance and prevents the browser from slowing down or freezing.

A debounce function adds a delay to an event listener to ensure a rapid succession of the events don’t occur. Some use cases for a JavaScript debounce function include performing search queries, checking for window resize, API calls for autocomplete, and so on.

Below is an example that expects the window to be resized but delays the end result. This will ensure multiple window resize events don’t trigger the results too often. The result in this case is printing the window width to the console, but in the context of a real application this could be something more resource-intensive.

let doResizeResult = () => { console.log(window.innerWidth); } let debounce = (callback, delay) => { let myTimeout; return () => { clearTimeout(myTimeout); myTimeout = setTimeout(() => { callback() }, delay); }; }; let doDebounce = debounce(() => doResizeResult(), 1000) window.addEventListener('resize', () => doDebounce());
Code language: JavaScript (javascript)

You can try the above code using this CodePen demo. Resize the window (or frame) that holds the preview in order to see the results displayed in the console. Notice you can resize the window multiple times in quick succession, but only the last one will be logged.

Note: To the best of our knowledge, the information above and the snippet are accurate and up to date. However, in case you notice something wrong, please report snippet or leave a comment below.
Back to SnippetsShow Comments

Or start the conversation in our Facebook group for WordPress professionals. Find answers, share tips, and get help from other WordPress experts. Join now (it’s free)!

Most Searched Articles

Best JavaScript Libraries and Frameworks: Try These 14 in 2022

In this post, we look at the best JavaScript libraries and frameworks to try out this year. Why? Well, with JavaScript being available in every web browser, this makes it the most accessible programming language of ...

25+ Best Free WordPress Themes for 2022 (Responsive, Mobile-Ready, Beautiful)

If you're looking for only the best free WordPress themes in the market for this year, then you're in the right place. We have more than enough such themes for you right ...

12 Best WordPress Hosting Providers of 2022 Compared & Tested

Looking for the best WordPress hosting that you can actually afford? We did the testing for you. Here are 10+ best hosts on the market ...

Handpicked Articles

How to Make a WordPress Website: Ultimate Guide for All Users – Beginners, Intermediate, Advanced

Many people wonder how to make a WordPress website. They’ve heard about WordPress, its incredible popularity, excellent features and designs, and now they want to join the pack and build a WordPress website of their own. So, where does one get ...

How to Start an Ecommerce Business: Ultimate Guide for 2022

Is this going to be the year you learn how to start an eCommerce business from scratch? You’re certainly in the right place! This guide will give you a roadmap to getting from 0 to a fully functional eCommerce business. ...