Dev.to

When to Debounce vs Throttle: A Developer’s Guide to Efficient Event Handling

How to use debounce and throttling in JavaScript as well as comparing the differences between them. Debouncing and throttling are great ways to not only improve your user experience but also save yourself quite a bit of money. In this compression of debounce vs throttle, I’m going to guide you how to use debounce and throttling in JavaScript as well as comparing the differences between them. Welcome back, my job is to simplify the web for you so you can start building your dream project sooner. In today’s guide, I’m going to be writing about debounce vs throttle and why they’re important to understand. Default Behavior To get started, I have a basic index.html file with: Default Debounce Throttle A text input. A “Default” section to display text as you type. A “Debounce” section. A “Throttle” section. Code Setup // Selecting elements const input = document.querySelector('input'); const defaultText = document.getElementById('default'); const debounceText = document.getElementById('debounce'); const throttleText = document.getElementById('throttle'); // Default input listener input.addEventListener('input', (e) => { defaultText.textContent = e.target.value; }); When you type, the defaultText updates instantly. But if this input triggered API calls (like autocomplete), typing “matrix” would send 6 requests — wasting resources and slowing down the app. Debouncing How Debounce Works: Waits for a delay (e.g., 1 second) after the last input before triggering. Resets the timer on every new input. Debounce Implementation function debounce(callback, delay = 1000) { let timeout; return (…args) => { clearTimeout(timeout); timeout = setTimeout(() => { callback(…args); }, delay); }; } // Usage const updateDebounceText = debounce((text) => { debounceText.textContent = text; }); input.addEventListener('input', (e) => { updateDebounceText(e.target.value); }); Result: If you type quickly, debounceText updates only after a 1-second pause. Throttling How Throttle Works: Triggers immediately on the first call. Ignores subsequent calls until the delay (e.g., 1 second) passes. Basic Throttle Implementation (Flawed) function throttle(callback, delay = 1000) { let shouldWait = false; return (…args) => { if (shouldWait) return; callback(…args); shouldWait = true; setTimeout(() => { shouldWait = false; }, delay); }; } Problem: If you type “asdf” quickly, throttleText only updates with “a” and ignores “sdf”. Improved Throttle (Saves Last Call) function throttle(callback, delay = 1000) { let shouldWait = false; let waitingArgs = null; const timeoutFunc = () => { if (waitingArgs === null) { shouldWait = false; } else { callback(…waitingArgs); waitingArgs = null; setTimeout(timeoutFunc, delay); } }; return (…args) => { if (shouldWait) { waitingArgs = args; return; } callback(…args); shouldWait = true; setTimeout(timeoutFunc, delay); }; } // Usage const updateThrottleText = throttle((text) => { throttleText.textContent = text; }); input.addEventListener('input', (e) => { updateThrottleText(e.target.value); }); Result: throttleText updates immediately on the first input, then every 1 second with the latest value. Real-World Use Cases Mouse Movement Example let defaultCount = 0, debounceCount = 0, throttleCount = 0; document.addEventListener('mousemove', () => { defaultCount++; defaultText.textContent = defaultCount; updateDebounceText(++debounceCount); updateThrottleText(++throttleCount); }); Results: Default: 350+ calls instantly. Debounce: Updates after a 1-second pause. Throttle (100ms delay): Updates 10 times per second. Best Use Cases: Feature Best For Debounce Autocomplete, search bars (wait for user to finish typing) Throttle Resizing, scrolling, mouse movement (limit frequent updates) Thanks for reading to the end, and have a good day!

Feb 14, 2025 - 06:00
 0
When to Debounce vs Throttle: A Developer’s Guide to Efficient Event Handling

How to use debounce and throttling in JavaScript as well as comparing the differences between them.

Debouncing and throttling are great ways to not only improve your user experience but also save yourself quite a bit of money. In this compression of debounce vs throttle, I’m going to guide you how to use debounce and throttling in JavaScript as well as comparing the differences between them.

Welcome back, my job is to simplify the web for you so you can start building your dream project sooner.

In today’s guide, I’m going to be writing about debounce vs throttle and why they’re important to understand.

Default Behavior

To get started, I have a basic index.html file with:









Default








Debounce








Throttle
  • A text input.
  • A “Default” section to display text as you type.
  • A “Debounce” section.
  • A “Throttle” section.

Code Setup 

// Selecting elements
 const input = document.querySelector('input');
 const defaultText = document.getElementById('default');
 const debounceText = document.getElementById('debounce');
 const throttleText = document.getElementById('throttle');
// Default input listener
 input.addEventListener('input', (e) => {
 defaultText.textContent = e.target.value;
 });

When you type, the defaultText updates instantly. But if this input triggered API calls (like autocomplete), typing “matrix” would send 6 requests — wasting resources and slowing down the app.

Debouncing

How Debounce Works:

  • Waits for a delay (e.g., 1 second) after the last input before triggering.
  • Resets the timer on every new input.

Debounce Implementation 

function debounce(callback, delay = 1000) {
 let timeout;
 return (…args) => {
 clearTimeout(timeout);
 timeout = setTimeout(() => {
 callback(…args);
 }, delay);
 };
 }
// Usage
 const updateDebounceText = debounce((text) => {
 debounceText.textContent = text;
 });
input.addEventListener('input', (e) => {
 updateDebounceText(e.target.value);
 });

Result: If you type quickly, debounceText updates only after a 1-second pause.

Throttling

How Throttle Works:

  • Triggers immediately on the first call.
  • Ignores subsequent calls until the delay (e.g., 1 second) passes.

Basic Throttle Implementation (Flawed) 

function throttle(callback, delay = 1000) {
 let shouldWait = false;
 return (…args) => {
 if (shouldWait) return;
 callback(…args);
 shouldWait = true;
 setTimeout(() => {
 shouldWait = false;
 }, delay);
 };
 }

Problem: If you type “asdf” quickly, throttleText only updates with “a” and ignores “sdf”.

Improved Throttle (Saves Last Call) 

function throttle(callback, delay = 1000) {
 let shouldWait = false;
 let waitingArgs = null;
const timeoutFunc = () => {
 if (waitingArgs === null) {
 shouldWait = false;
 } else {
 callback(…waitingArgs);
 waitingArgs = null;
 setTimeout(timeoutFunc, delay);
 }
 };
return (…args) => {
 if (shouldWait) {
 waitingArgs = args;
 return;
 }
 callback(…args);
 shouldWait = true;
 setTimeout(timeoutFunc, delay);
 };
 }
// Usage
 const updateThrottleText = throttle((text) => {
 throttleText.textContent = text;
 });
input.addEventListener('input', (e) => {
 updateThrottleText(e.target.value);
 });

Result: throttleText updates immediately on the first input, then every 1 second with the latest value.

Real-World Use Cases

Mouse Movement Example 

let defaultCount = 0, debounceCount = 0, throttleCount = 0;
document.addEventListener('mousemove', () => {
 defaultCount++;
 defaultText.textContent = defaultCount;
 updateDebounceText(++debounceCount);
 updateThrottleText(++throttleCount);
 });

Results:

  • Default: 350+ calls instantly.
  • Debounce: Updates after a 1-second pause.
  • Throttle (100ms delay): Updates 10 times per second.

Best Use Cases:

Feature Best For
Debounce Autocomplete, search bars (wait for user to finish typing)
Throttle Resizing, scrolling, mouse movement (limit frequent updates)

Thanks for reading to the end, and have a good day!