JavaScript Performance

Debouncing & Throttling

Control how often functions execute for better performance

Find videos you like?

Save to resource drawer for future reference!

Optimize Performance with Smart Rate Limiting

Debouncing and Throttling are techniques to limit how often a function executes. Perfect for search boxes, scroll handlers, and button clicks!

Debouncing

Waits for a pause in events. Only executes after the user stops triggering events for a specified time.

💡 Like an elevator: waits for everyone to get in before closing the doors.

Throttling

Limits execution rate. Executes at most once per specified time period, regardless of how many times it's called.

💡 Like a heartbeat: happens regularly at a steady pace, no faster.

Interactive Demo

Click buttons rapidly to see the difference

⚡ Normal (No Control)

Executions:

Executes every single time. Can cause performance issues!

⏱️ Debounced (1s)

Clicks:

Executions:

Waits 1s after last click. Only executes after you stop clicking!

⚡ Throttled (1s)

Clicks:

Executions:

Executes immediately, then max once per second!

Try It Out!

Click each button rapidly or use "Auto Simulate" to see the difference. Notice how debounce waits for you to stop, while throttle executes at regular intervals!

Visual Comparison

Understanding the difference

Debounce Timeline

0ms:Event 1 → Timer starts (1000ms)

200ms:Event 2 → Timer resets (1000ms)

500ms:Event 3 → Timer resets (1000ms)

1500ms:✓ Function executes!

Only the last event matters. Timer keeps resetting until events stop.

Throttle Timeline

0ms:Event 1 → ✓ Executes!

200ms:Event 2 → Ignored (too soon)

500ms:Event 3 → Ignored (too soon)

1000ms:Event 4 → ✓ Executes!

Executes at regular intervals. First event runs immediately.

Debounce: Search Input Example

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #7c3aed; margin-bottom: 20px;">Search with Debounce</h2>
  <input
    type="text"
    id="search"
    placeholder="Type to search..."
    style="width: 100%; padding: 12px; font-size: 16px; border: 2px solid #a78bfa; border-radius: 8px; margin-bottom: 15px;"
    />
    <div style="display: flex; gap: 15px; margin-bottom: 20px;">
      <div style="flex: 1; padding: 15px; background: #f3e8ff; border-radius: 8px; border: 2px solid #e9d5ff;">
        <div style="font-size: 12px; color: #7c3aed; margin-bottom: 5px;">Key Presses:</div>
        <div id="keypresses" style="font-size: 28px; font-weight: bold; color: #6b21a8;">0</div>
      </div>
      <div style="flex: 1; padding: 15px; background: #dcfce7; border-radius: 8px; border: 2px solid #bbf7d0;">
        <div style="font-size: 12px; color: #16a34a; margin-bottom: 5px;">API Calls:</div>
        <div id="apicalls" style="font-size: 28px; font-weight: bold; color: #15803d;">0</div>
      </div>
    </div>
    <div id="results" style="padding: 15px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; min-height: 60px; color: #475569;">
      Start typing to see debounce in action...
    </div>
  </div>

Live Preview

Loading preview...

Throttle: Button Click Example

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #ec4899; margin-bottom: 20px;">Button Click with Throttle</h2>
  <button
    id="clickBtn"
    style="width: 100%; padding: 20px; font-size: 18px; font-weight: bold; background: linear-gradient(135deg, #ec4899, #f472b6); color: white; border: none; border-radius: 10px; cursor: pointer; margin-bottom: 15px;"
    >
    Click Me Rapidly!
  </button>
  <div style="display: flex; gap: 15px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 15px; background: #fce7f3; border-radius: 8px; border: 2px solid #fbcfe8;">
      <div style="font-size: 12px; color: #ec4899; margin-bottom: 5px;">Total Clicks:</div>
      <div id="totalclicks" style="font-size: 28px; font-weight: bold; color: #be185d;">0</div>
    </div>
    <div style="flex: 1; padding: 15px; background: #dcfce7; border-radius: 8px; border: 2px solid #bbf7d0;">
      <div style="font-size: 12px; color: #16a34a; margin-bottom: 5px;">Executions:</div>
      <div id="executions" style="font-size: 28px; font-weight: bold; color: #15803d;">0</div>
    </div>
  </div>
  <div id="status" style="padding: 15px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; color: #475569; text-align: center;">
    Click the button rapidly to see throttle in action!
  </div>
</div>

Live Preview

Loading preview...

When to Use Each

Choosing the right technique

✓ Use Debounce When:

🔍Search input - Wait for user to finish typing
↔️Window resize - Wait for resize to complete
✍️Form validation - Validate after user stops editing
💾Auto-save - Save after user stops typing

Key idea: Only care about the final value after activity stops

✓ Use Throttle When:

📜Scroll events - Update UI while scrolling
🖱️Mouse movement - Track cursor position
🎮Game loops - Limit frame updates
🔔Button clicks - Prevent rapid double-clicks

Key idea: Need regular updates during continuous activity

Autocomplete with Debounce

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #7c3aed; margin-bottom: 20px;">Search with Autocomplete</h2>
  <div style="position: relative;">
    <input
      type="text"
      id="autocomplete"
      placeholder="Search for a programming language..."
      style="width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid #a78bfa; border-radius: 10px; margin-bottom: 10px;"
      />
      <div id="dropdown" style="display: none; position: absolute; width: 100%; background: white; border: 2px solid #a78bfa; border-radius: 10px; margin-top: -10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto; z-index: 10;"></div>
    </div>
    <div style="display: flex; gap: 12px; margin-top: 20px;">
      <div style="flex: 1; padding: 12px; background: #f3e8ff; border-radius: 8px; text-align: center;">
        <div style="font-size: 11px; color: #7c3aed; margin-bottom: 4px;">Keystrokes</div>
        <div id="keystrokes" style="font-size: 24px; font-weight: bold; color: #6b21a8;">0</div>
      </div>
      <div style="flex: 1; padding: 12px; background: #dcfce7; border-radius: 8px; text-align: center;">
        <div style="font-size: 11px; color: #16a34a; margin-bottom: 4px;">API Calls</div>
        <div id="apicallcount" style="font-size: 24px; font-weight: bold; color: #15803d;">0</div>
      </div>
    </div>
    <div id="selectedItem" style="margin-top: 15px; padding: 12px; background: #f1f5f9; border-radius: 8px; min-height: 40px; color: #475569; font-size: 14px;"></div>
  </div>

Live Preview

Loading preview...

Infinite Scroll with Throttle

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #ec4899; margin-bottom: 20px;">Infinite Scroll Demo</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 15px;">
    <div style="flex: 1; padding: 12px; background: #fce7f3; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #ec4899; margin-bottom: 4px;">Scroll Events</div>
      <div id="scrollevents" style="font-size: 24px; font-weight: bold; color: #be185d;">0</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dcfce7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #16a34a; margin-bottom: 4px;">Load Checks</div>
      <div id="loadchecks" style="font-size: 24px; font-weight: bold; color: #15803d;">0</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dbeafe; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #2563eb; margin-bottom: 4px;">Items Loaded</div>
      <div id="itemsloaded" style="font-size: 24px; font-weight: bold; color: #1e40af;">8</div>
    </div>
  </div>
  <div id="scrollContainer" style="height: 400px; overflow-y: auto; border: 2px solid #f472b6; border-radius: 10px; padding: 15px; background: #fdf2f8;">
    <div id="itemsList"></div>
    <div id="loader" style="display: none; text-align: center; padding: 20px; color: #ec4899; font-weight: bold;">
      <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f9a8d4; border-top-color: #ec4899; border-radius: 50%; animation: spin 1s linear infinite;"></div>
      <div style="margin-top: 10px;">Loading more items...</div>
    </div>
  </div>
  <div style="margin-top: 15px; padding: 12px; background: #f1f5f9; border-radius: 8px; text-align: center; color: #475569; font-size: 13px;">
    Scroll down to load more items! Throttle limits checks to once per 500ms.
  </div>
</div>

Live Preview

Loading preview...

Key Takeaways

⏱️

Debounce

Waits for pause in events
Executes after delay
Perfect for search, validation

⚡

Throttle

Limits execution rate
Regular intervals
Perfect for scroll, mousemove

🚀

Performance

Reduces function calls
Saves server requests
Improves responsiveness

💡

Simple Rule

Debounce: Final value matters
Throttle: Regular updates needed
Both: Prevent performance issues

Pro Tip

Start with debounce for user input (search, forms) and throttle for continuous events (scroll, resize). Test with the interactive demo above to understand the behavior before implementing!

Previous Topic

Debugging Techniques

Console methods, breakpoints, and debugging strategies.

Next Topic

Lazy Loading

On-demand resource loading for better performance.

Ask a Question

Have a question about Debouncing & Throttling? Ask our AI assistant.

🔐 Login to use AI Assistant

JavaScript Code Editor

Write and experiment with JavaScript code.

Output

Click "Run Code" to see the output.

JavaScript Performance

Debouncing & Throttling

Control how often functions execute for better performance

Find videos you like?

Save to resource drawer for future reference!

Optimize Performance with Smart Rate Limiting

Debouncing and Throttling are techniques to limit how often a function executes. Perfect for search boxes, scroll handlers, and button clicks!

Debouncing

Waits for a pause in events. Only executes after the user stops triggering events for a specified time.

💡 Like an elevator: waits for everyone to get in before closing the doors.

Throttling

Limits execution rate. Executes at most once per specified time period, regardless of how many times it's called.

💡 Like a heartbeat: happens regularly at a steady pace, no faster.

Interactive Demo

Click buttons rapidly to see the difference

⚡ Normal (No Control)

Executions:

Executes every single time. Can cause performance issues!

⏱️ Debounced (1s)

Clicks:

Executions:

Waits 1s after last click. Only executes after you stop clicking!

⚡ Throttled (1s)

Clicks:

Executions:

Executes immediately, then max once per second!

Try It Out!

Click each button rapidly or use "Auto Simulate" to see the difference. Notice how debounce waits for you to stop, while throttle executes at regular intervals!

Visual Comparison

Understanding the difference

Debounce Timeline

0ms:Event 1 → Timer starts (1000ms)

200ms:Event 2 → Timer resets (1000ms)

500ms:Event 3 → Timer resets (1000ms)

1500ms:✓ Function executes!

Only the last event matters. Timer keeps resetting until events stop.

Throttle Timeline

0ms:Event 1 → ✓ Executes!

200ms:Event 2 → Ignored (too soon)

500ms:Event 3 → Ignored (too soon)

1000ms:Event 4 → ✓ Executes!

Executes at regular intervals. First event runs immediately.

Debounce: Search Input Example

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #7c3aed; margin-bottom: 20px;">Search with Debounce</h2>
  <input
    type="text"
    id="search"
    placeholder="Type to search..."
    style="width: 100%; padding: 12px; font-size: 16px; border: 2px solid #a78bfa; border-radius: 8px; margin-bottom: 15px;"
    />
    <div style="display: flex; gap: 15px; margin-bottom: 20px;">
      <div style="flex: 1; padding: 15px; background: #f3e8ff; border-radius: 8px; border: 2px solid #e9d5ff;">
        <div style="font-size: 12px; color: #7c3aed; margin-bottom: 5px;">Key Presses:</div>
        <div id="keypresses" style="font-size: 28px; font-weight: bold; color: #6b21a8;">0</div>
      </div>
      <div style="flex: 1; padding: 15px; background: #dcfce7; border-radius: 8px; border: 2px solid #bbf7d0;">
        <div style="font-size: 12px; color: #16a34a; margin-bottom: 5px;">API Calls:</div>
        <div id="apicalls" style="font-size: 28px; font-weight: bold; color: #15803d;">0</div>
      </div>
    </div>
    <div id="results" style="padding: 15px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; min-height: 60px; color: #475569;">
      Start typing to see debounce in action...
    </div>
  </div>

Live Preview

Loading preview...

Throttle: Button Click Example

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #ec4899; margin-bottom: 20px;">Button Click with Throttle</h2>
  <button
    id="clickBtn"
    style="width: 100%; padding: 20px; font-size: 18px; font-weight: bold; background: linear-gradient(135deg, #ec4899, #f472b6); color: white; border: none; border-radius: 10px; cursor: pointer; margin-bottom: 15px;"
    >
    Click Me Rapidly!
  </button>
  <div style="display: flex; gap: 15px; margin-bottom: 20px;">
    <div style="flex: 1; padding: 15px; background: #fce7f3; border-radius: 8px; border: 2px solid #fbcfe8;">
      <div style="font-size: 12px; color: #ec4899; margin-bottom: 5px;">Total Clicks:</div>
      <div id="totalclicks" style="font-size: 28px; font-weight: bold; color: #be185d;">0</div>
    </div>
    <div style="flex: 1; padding: 15px; background: #dcfce7; border-radius: 8px; border: 2px solid #bbf7d0;">
      <div style="font-size: 12px; color: #16a34a; margin-bottom: 5px;">Executions:</div>
      <div id="executions" style="font-size: 28px; font-weight: bold; color: #15803d;">0</div>
    </div>
  </div>
  <div id="status" style="padding: 15px; background: #f8fafc; border-radius: 8px; border: 1px solid #e2e8f0; color: #475569; text-align: center;">
    Click the button rapidly to see throttle in action!
  </div>
</div>

Live Preview

Loading preview...

When to Use Each

Choosing the right technique

✓ Use Debounce When:

🔍Search input - Wait for user to finish typing
↔️Window resize - Wait for resize to complete
✍️Form validation - Validate after user stops editing
💾Auto-save - Save after user stops typing

Key idea: Only care about the final value after activity stops

✓ Use Throttle When:

📜Scroll events - Update UI while scrolling
🖱️Mouse movement - Track cursor position
🎮Game loops - Limit frame updates
🔔Button clicks - Prevent rapid double-clicks

Key idea: Need regular updates during continuous activity

Autocomplete with Debounce

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #7c3aed; margin-bottom: 20px;">Search with Autocomplete</h2>
  <div style="position: relative;">
    <input
      type="text"
      id="autocomplete"
      placeholder="Search for a programming language..."
      style="width: 100%; padding: 14px 16px; font-size: 16px; border: 2px solid #a78bfa; border-radius: 10px; margin-bottom: 10px;"
      />
      <div id="dropdown" style="display: none; position: absolute; width: 100%; background: white; border: 2px solid #a78bfa; border-radius: 10px; margin-top: -10px; box-shadow: 0 4px 12px rgba(0,0,0,0.1); max-height: 250px; overflow-y: auto; z-index: 10;"></div>
    </div>
    <div style="display: flex; gap: 12px; margin-top: 20px;">
      <div style="flex: 1; padding: 12px; background: #f3e8ff; border-radius: 8px; text-align: center;">
        <div style="font-size: 11px; color: #7c3aed; margin-bottom: 4px;">Keystrokes</div>
        <div id="keystrokes" style="font-size: 24px; font-weight: bold; color: #6b21a8;">0</div>
      </div>
      <div style="flex: 1; padding: 12px; background: #dcfce7; border-radius: 8px; text-align: center;">
        <div style="font-size: 11px; color: #16a34a; margin-bottom: 4px;">API Calls</div>
        <div id="apicallcount" style="font-size: 24px; font-weight: bold; color: #15803d;">0</div>
      </div>
    </div>
    <div id="selectedItem" style="margin-top: 15px; padding: 12px; background: #f1f5f9; border-radius: 8px; min-height: 40px; color: #475569; font-size: 14px;"></div>
  </div>

Live Preview

Loading preview...

Infinite Scroll with Throttle

Frontend

<div style="max-width: 600px; margin: 0 auto;">
  <h2 style="color: #ec4899; margin-bottom: 20px;">Infinite Scroll Demo</h2>
  <div style="display: flex; gap: 12px; margin-bottom: 15px;">
    <div style="flex: 1; padding: 12px; background: #fce7f3; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #ec4899; margin-bottom: 4px;">Scroll Events</div>
      <div id="scrollevents" style="font-size: 24px; font-weight: bold; color: #be185d;">0</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dcfce7; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #16a34a; margin-bottom: 4px;">Load Checks</div>
      <div id="loadchecks" style="font-size: 24px; font-weight: bold; color: #15803d;">0</div>
    </div>
    <div style="flex: 1; padding: 12px; background: #dbeafe; border-radius: 8px; text-align: center;">
      <div style="font-size: 11px; color: #2563eb; margin-bottom: 4px;">Items Loaded</div>
      <div id="itemsloaded" style="font-size: 24px; font-weight: bold; color: #1e40af;">8</div>
    </div>
  </div>
  <div id="scrollContainer" style="height: 400px; overflow-y: auto; border: 2px solid #f472b6; border-radius: 10px; padding: 15px; background: #fdf2f8;">
    <div id="itemsList"></div>
    <div id="loader" style="display: none; text-align: center; padding: 20px; color: #ec4899; font-weight: bold;">
      <div style="display: inline-block; width: 40px; height: 40px; border: 4px solid #f9a8d4; border-top-color: #ec4899; border-radius: 50%; animation: spin 1s linear infinite;"></div>
      <div style="margin-top: 10px;">Loading more items...</div>
    </div>
  </div>
  <div style="margin-top: 15px; padding: 12px; background: #f1f5f9; border-radius: 8px; text-align: center; color: #475569; font-size: 13px;">
    Scroll down to load more items! Throttle limits checks to once per 500ms.
  </div>
</div>

Live Preview

Loading preview...

Key Takeaways

⏱️

Debounce

Waits for pause in events
Executes after delay
Perfect for search, validation

⚡

Throttle

Limits execution rate
Regular intervals
Perfect for scroll, mousemove

🚀

Performance

Reduces function calls
Saves server requests
Improves responsiveness

💡

Simple Rule

Debounce: Final value matters
Throttle: Regular updates needed
Both: Prevent performance issues

Pro Tip

Start with debounce for user input (search, forms) and throttle for continuous events (scroll, resize). Test with the interactive demo above to understand the behavior before implementing!

Coder Pod - Learn Programming Online | AI Coding Tutor & Interview Practice

Debugging Techniques

Lazy Loading

JavaScript Code Editor

Building Your Learning Module...

Debouncing & Throttling

Optimize Performance with Smart Rate Limiting

Debouncing

Throttling

⚡ Normal (No Control)

⏱️ Debounced (1s)

⚡ Throttled (1s)

Try It Out!

Debounce Timeline

Throttle Timeline

Debounce: Search Input Example

Throttle: Button Click Example

✓ Use Debounce When:

✓ Use Throttle When:

Autocomplete with Debounce

Infinite Scroll with Throttle

Key Takeaways

Debounce

Throttle

Performance

Simple Rule

Pro Tip

Debugging Techniques

Lazy Loading

JavaScript Code Editor

Debouncing & Throttling

Optimize Performance with Smart Rate Limiting

Debouncing

Throttling

⚡ Normal (No Control)

⏱️ Debounced (1s)

⚡ Throttled (1s)

Try It Out!

Debounce Timeline

Throttle Timeline

Debounce: Search Input Example

Throttle: Button Click Example

✓ Use Debounce When:

✓ Use Throttle When:

Autocomplete with Debounce

Infinite Scroll with Throttle

Key Takeaways

Debounce

Throttle

Performance

Simple Rule

Pro Tip