21. Debouncing vs Throttling: Production Polyfills with Leading & Trailing Flags • JavaScript & Advanced ES6+ (0-to-Hero Big Tech Standard) • Rishabh Ki Kaksha

Jab browser me koi high-frequency event hota hai (jaise user search input type kar raha hai, window resize kar raha hai, ya scroll kar raha hai) — har second **100 baar function call** hone se browser crash ho sakta hai!

Inhe control karne ke liye hum 2 rate-limiting techniques use karte hain:

**Lift & Gun Analogy:**
> **Debounce (Lift Ka Darwaza):** Lift ka darwaza tabhi band hoga jab aakhri insaan andar aa jaye aur agle 5 second tak koi naya na aaye (Search Bar typing).  
> **Throttle (Machine Gun):** Chahe tu trigger dabaye rakh, goli har 1 second me sirf 1 baar hi niklegi (Infinite Scroll & Window Resize).

---

### 2. Master Comparison Matrix

---

### 3. Production Polyfill 1: Robust Debounce with Immediate (Leading) & Cancel

```javascript
function debounce(fn, delay = 300, immediate = false) {
    let timer = null;

function debounced(...args) {
        const context = this;
        const callNow = immediate && !timer;

clearTimeout(timer);

timer = setTimeout(() => {
            timer = null;
            if (!immediate) {
                fn.apply(context, args);
            }
        }, delay);

if (callNow) {
            fn.apply(context, args);
        }
    }

// Cleanup method (Modal close or component unmount)
    debounced.cancel = function() {
        clearTimeout(timer);
        timer = null;
    };

return debounced;
}

// Usage:
const searchAPI = debounce((query) => {
    console.log("🔍 Fetching results for:", query);
}, 400);
```

---

### 4. Production Polyfill 2: Precision Throttle (Leading & Trailing Edge)

```javascript
function throttle(fn, limit = 200) {
    let inThrottle = false;
    let lastArgs = null;
    let lastContext = null;

return function(...args) {
        if (!inThrottle) {
            // Leading edge execution
            fn.apply(this, args);
            inThrottle = true;

setTimeout(() => {
                inThrottle = false;
                // Trailing edge: agar cooldown ke dauran koi event aaya tha toh run karo
                if (lastArgs) {
                    fn.apply(lastContext, lastArgs);
                    lastArgs = null;
                    lastContext = null;
                }
            }, limit);
        } else {
            lastArgs = args;
            lastContext = this;
        }
    };
}

// Usage:
window.addEventListener("scroll", throttle(() => {
    console.log("📜 Scroll position updated safely");
}, 150));
```

---

### 5. Big Tech Production Pitfall: Memory Leaks on Unmount

React ya Single Page Apps me agar debounced/throttled event listeners ko component unmount hone par `.cancel()` ya `removeEventListener` na kiya jaye, toh timer background me pending references retain karke memory leak kar deta hai.

---

### 6. Interview Ke 3 Sawal Is Topic Se

1. **Debounce me Leading vs Trailing edge ka kya matlab hai?** -> Leading edge ka matlab pehle keystroke par turant execute hona aur agle keystrokes par delay lagana; Trailing edge ka matlab typing band hone ke baad delay expire hone par execute hona.
2. **Search bar me Throttle kyun nahi lagana chahiye?** -> Kyunki agar user "iPhone" type kar raha hai, throttle beech me "iP" par API call fire kar dega jo bekar ka network traffic generate karega.
3. **`requestAnimationFrame` throttling se better kab hota hai?** -> Jab visual DOM animations ya scroll-based canvas rendering karni ho, kyunki rAF screen refresh rate (60Hz / 120Hz) ke sath automatically sync hota hai.

---
**Next Topic:** 22. Big Tech Machine Coding: Custom EventEmitter & PubSub System

Loading lesson content...

🎯 Big Tech Coding & Interview Challenges

Practice these curated problems. Click "Load in Sandbox" to solve live in the Code Studio!

2 Questions

Medium

1. Production Debounce with Cancel and Immediate Option

Implement `debounce(fn, delay, immediate)` with a `.cancel()` method to clear pending executions.

💡 View Pro Interview Hint

• Manage timer and cancel function.

Medium

2. Production Throttle Implementation

Implement `throttle(fn, limit)` guaranteeing execution at fixed intervals.

💡 View Pro Interview Hint

• Use a boolean lock released by setTimeout.

JavaScript

Full IDE

Live Execution Terminal

Click "Execute Live" to run code.
                

🎯 Big Tech Coding & Interview Challenges

1. Production Debounce with Cancel and Immediate Option

2. Production Throttle Implementation

Lesson Mastery AI Quiz

AI Doubt Solver

CERTIFICATE OF COMPLETION

Rishabh Gehlot

PHP 8+ & Laravel 11 Master Track