In the world of frontend development, performance and user experience are everything. If you’ve ever typed into a search input and noticed it firing a request on every keystroke, you know how annoying and inefficient that can be.

That’s where debounce comes in.

Today, I’ll walk you through a JS coding challenge that covers what debounce is, how it works, and why it’s incredibly useful in real-world applications.

🚦 Too many function calls!

Imagine building a search bar. Each time a user types a letter, you want to send a request to fetch search results. But if they type fast, you could be firing off dozens of requests per second, many of which are useless because the user hasn’t finished typing yet.

You need a way to wait until the user stops typing for a bit before running the function.

That’s what debouncing does.

🧠 What Is Debounce?

Debounce is a technique to limit the rate at which a function is executed. Instead of firing the function immediately, you delay its execution until a specified time has passed since the last time it was invoked.

If it gets called again before the delay ends, the timer resets.

🛠️ Writing a Debounce function

Here’s an example implementation of debounce in JavaScript:

function debounce(func, delay) {
  let timeoutId;

  return function(...args) {
    // Clear the previous timeout, so the function won't be executed yet
    clearTimeout(timeoutId);

    // Set a new timeout to call the function after the delay
    timeoutId = setTimeout(() => {
      func(...args);
    }, delay);
  };
}

This function takes two arguments:

  • func: the function you want to debounce.
  • delay: how long to wait (in ms) after the last call before executing func.

💡 Debounced search as use case 

// Example function that will be debounced
function searchQuery(query) {
  console.log(`Searching for: ${query}`);
}

// Create a debounced version of the searchQuery function
const debouncedSearch = debounce(searchQuery, 300);

// Now you can call debouncedSearch, and it will only trigger searchQuery once the user stops typing for 300ms.
debouncedSearch('apple');
debouncedSearch('apple pie');
debouncedSearch('apple pie recipe');

Even though debouncedSearch is called three times quickly, searchQuery will only run once, with 'apple pie recipe', after the user has stopped typing for 300 milliseconds.

🧪 Why it matters?

Using debounce helps with:

  • Reducing API calls or expensive operations
  • Improving performance
  • Smoothing the user experience

It’s especially useful for:

  • Search inputs
  • Resizing events
  • Scrolling performance
  • Auto-saving forms

🧼 TL;DR

  • Debounce delays a function until a period of inactivity.
  • It helps avoid redundant or expensive executions.
  • Easy to implement, and extremely powerful in frontend apps.

Next time you build a feature that responds to frequent user input debounce it. Your app (and your backend) will thank you.

✍️ Got thoughts or improvements on this debounce implementation? Drop a comment or let’s connect!