Photo by Ellen Qin on Unsplash

Debouncing in JavaScript

Sending a Request Only after the User Has Stopped Typing

Faraz Kelhini
3 min readSep 21, 2021

--

📚 Connect with us. Want to hear what’s new at The Pragmatic Bookshelf? Sign up for our newsletter. You’ll be the first to know about author speaking engagements, books in beta, new books in print, and promo codes that give you discounts of up to 40%.

The JavaScript language was invented to respond to user interactions on web pages. While most interactions are infrequent, some may happen repeatedly in a short period of time. If you code your program to execute a CPU-intensive function with each interaction, you might slow down the browser. You can’t simply remove the function because it’s a critical part of your program, but you also can’t let it undermine the performance of your program.

The solution is to implement a debounce function. Debouncing is a programming technique that enables you to ensure tasks do not fire so often. Take live search for example: an event fires at each key press, but if you immediately make a request with each event, you’ll unnecessarily bog down the server because the user might not have finished typing yet.

💡 If you are wondering what async is useful for, pick up Modern Asynchronous JavaScript (now in beta), which details all sorts of examples and patterns.

--

--

Faraz Kelhini
The Pragmatic Programmers

Faraz is a professional JavaScript developer who is passionate about promoting patterns and ideas that make web development more productive. Website: eloux.com