DEV Community

Cover image for ๐Ÿš€ Throttle vs Debounce in JavaScript โ€“ The Ultimate Guide with Examples
ROHIT SINGH
ROHIT SINGH

Posted on

๐Ÿš€ Throttle vs Debounce in JavaScript โ€“ The Ultimate Guide with Examples

If youโ€™ve ever worked with scroll events, search boxes, or API calls in JavaScript, youโ€™ve likely faced the issue of functions running too often and slowing down your app. Thatโ€™s where Throttle and Debounce come to the rescue!

In this blog, Iโ€™ll explain the difference between throttle and debounce with real-world examples, code snippets, and when to use each one.

๐Ÿ”น What is Debounce in JavaScript?

Debounce makes sure a function runs only after a certain time has passed since the last call.

๐Ÿ‘‰ Think of typing in a search box. You donโ€™t want to call the API for every single keystroke. Instead, you want to wait until the user stops typing.

โœ… Example:

function debounce(func, delay) {
  let timeout;
  return function (...args) {
    clearTimeout(timeout);
    timeout = setTimeout(() => func.apply(this, args), delay);
  };
}

const debouncedSearch = debounce(() => {
  console.log("Searching...");
}, 1000);

document.getElementById("searchBox").addEventListener("input", debouncedSearch);
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“Œ Here, the function will run only after the user stops typing for 1 second.

๐Ÿ”น What is Throttle in JavaScript?

Throttle ensures a function executes at most once in a given time frame, no matter how many times itโ€™s triggered.

๐Ÿ‘‰ Think of scrolling. You donโ€™t want to calculate positions on every pixel scroll; instead, you want to run the function once every X ms.

โœ… Example:

function throttle(func, delay) {
  let lastCall = 0;
  return function (...args) {
    const now = Date.now();
    if (now - lastCall >= delay) {
      func.apply(this, args);
      lastCall = now;
    }
  };
}

const throttledScroll = throttle(() => {
  console.log("Throttled Scroll Event");
}, 2000);

window.addEventListener("scroll", throttledScroll);
Enter fullscreen mode Exit fullscreen mode

๐Ÿ“Œ Even if you scroll like crazy, this function will fire only once every 2 seconds.

โšก Throttle vs Debounce โ€“ Key Differences

Debounce Examples

Search input (API call after typing stops)

Auto-save feature in text editor

Form validation

Throttle Examples

Scroll position tracking

Resizing window events

API rate limiting (avoid hitting server too much)

โ“ FAQs

Q1. Which is better โ€“ throttle or debounce?
๐Ÿ‘‰ It depends on your use case. Use debounce for waiting (like search), and throttle for limiting (like scroll).

Q2. Can I use libraries instead of writing my own?
๐Ÿ‘‰ Yes! Popular libraries like Lodash provide ready-to-use _.debounce() and _.throttle() functions.

Q3. Does using them improve performance?
๐Ÿ‘‰ Absolutely. They reduce unnecessary executions and make your app smoother.

๐Ÿ† Conclusion

Both Throttle and Debounce are powerful tools to optimize JavaScript performance.

Use Debounce when you want to wait until the user stops doing something.

Use Throttle when you want to limit execution rate during continuous actions.

By applying them in the right places, youโ€™ll make your apps faster, smoother, and more user-friendly. ๐Ÿš€

๐Ÿ‘‰ If you found this blog useful, drop a comment and share it with your fellow developers!
๐Ÿ‘‰ Follow me for more JavaScript tips and tricks.

๐Ÿš€ Rohit Singh ๐Ÿš€ โ€“ Medium

Read writing from ๐Ÿš€ Rohit Singh ๐Ÿš€ on Medium. Full-stack developer with 6+ years in Angular, Node.js & AWS. Sharing tips, best practices & real-world lessons from building scalable apps.

favicon medium.com

Top comments (0)