Blog

Debouncing aur Throttling Kya Hote Hain ?

Jab hum kisi event (jaise scroll, resize, input, ya button click) ko handle karte hain, aur wo event baar-baar frequent fire hota hai, to browser slow ho sakta hai ya performance degrade ho sakti hai.

Debouncing aur Throttling dono techniques hain jo performance improve karne ke liye use hoti hain — especially high-frequency events ko control karne ke liye.

Debouncing kya hota hai?

Debouncing ek technique hai jo JavaScript me use hoti hai jab kisi function ko bar-bar aur unnecessary baar trigger hone se bachana hota hai. Jab hum koi event jaise ki scroll, resize ya keypress par continuously function call karte hain, to performance issue ho sakta hai. Debouncing is problem ko solve karta hai by ensuring ki function sirf tabhi execute ho jab user ka action thodi der ke liye ruk jaye.

Matlab: Jab tak user event perform karta rahega, function call nahi hoga. Jaise hi kuch time tak action nahi hota, function ek baar execute hota hai.

Isme hum ek delay ya timeout set karte hain (jaise 300ms), aur har naye event par purana timer reset ho jata hai. Debouncing se browser ki performance improve hoti hai aur unnecessary function calls avoid hote hain.

Real Life Example:

Imagine karo tum search box mein type kar rahe ho:

User types: “h”, “he”, “hel”, “hell”, “hello”

Debouncing ensure karta hai ki function sirf tabhi chale jab user typing band kar de aur maan lo 300ms tak aur kuch type na kare.

Example: Debounce Function

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

// Example use
const handleInput = debounce(function () {
  console.log("API Call for search input");
}, 300);

// input event listener
document.getElementById("search").addEventListener("input", handleInput);

 Use Cases of Debouncing:

• Search input suggestions
• Resize window events
• Auto-saving form
• Button rapid clicks prevention

Throttling kya hota hai?

Throttling ek technique hai jisme hum kisi function ko baar-baar call hone se rok kar, ek fix interval ke baad hi execute karne dete hain.

Jab kisi event jaise “scroll”, “resize” ya “mouse move” par function baar-baar trigger hota hai, tab throttling use karke performance improve ki ja sakti hai.

Throttling ensure karta hai ki function sirf har particular time gap ke baad hi chale, chahe event kitni bhi baar fire ho. JavaScript me throttling ko achieve karne ke liye hum setTimeout() ka use kar sakte hain, ya phir popular libraries jaise Lodash ka throttle method.

Isse browser ke resources save hote hain aur application smooth chalti hai. Throttling real-time applications, animations aur heavy computations ke cases me kaafi useful hota hai.

Real Life Example:

Socho tumhare paas ek scroll event hai. User continuously scroll karta hai.

Throttling karega:
Scroll → wait 100ms → fire → wait 100ms → fire

Chahe beech mein aur 10 scroll events ho, function call nahi hoga jab tak time complete nahi ho jata.

Example: Throttle Function

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

// Example use
const handleScroll = throttle(function () {
  console.log("Scroll position updated");
}, 200);

window.addEventListener("scroll", handleScroll);

Use Cases of Throttling:

• Scroll events
• Mousemove events
• Resize window
• Preventing API overloading

Debounce vs Throttling (Difference Summary)

Debounce: Jab user last action ke baad rukta hai tab function chale.

Throttle: Fixed time interval ke hisaab se function call hota rahe.

Ye dono techniques performance optimization ke liye important tools hain — jab aapko unnecessary frequent function calls se bachna ho.

Quiz: Test Your Knowledge on JavaScript Debouncing & Throttling

Bonus: Practical Application!

Aaj hi JavaScript me Debouncing aur Throttling ka istemal karke dekhein!

JavaScript ke performance optimization techniques jaise Debouncing (input delays ke liye) aur Throttling (scroll ya resize events ke control ke liye) ka upayog karke apne web application ko aur bhi efficient banayein.