डिबाउंस बनाम थ्रॉटल — स्वयं बनाना
छोटी डिबाउंस और थ्रॉटल उपयोगिताएँ बनाएँ। ट्रेलिंग और लीडिंग रूपों का अभ्यास करें तथा जानें कि किसे कब चुनना है।
डिबाउंस बनाम थ्रॉटल — स्वयं बनाना, CoddyKit पर JavaScript Academy का एक निःशुल्क पाठ है। यह 3 में से 2वाँ पाठ है। इस अध्ययन पथ के 3 तक कोई भी पाठ पूरा पढ़ना निःशुल्क है — इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ व्यावहारिक अभ्यास भी उपलब्ध कराता है। यह JavaScript Academy सीखने के मार्ग का हिस्सा है और आपकी प्रगति वेब तथा CoddyKit ऐप पर सिंक होती रहती है। JavaScript Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
सारांश
लक्ष्य: बार-बार होने वाली घटनाओं को नियंत्रित करना।
- डिबाउंस: शांति आने तक प्रतीक्षा करें, फिर एक बार चलाएँ
- थ्रॉटल: प्रत्येक अंतराल में अधिकतम एक बार चलाएँ
- शुरुआती और अंतिम कॉल
- छोटे, पढ़ने में आसान सहायक

डिबाउंस (अंतिम)
अंतिम डिबाउंस हर घटना पर timer को फिर से शुरू करता है और गतिविधि शांत होने पर एक बार चलता है।
// Debounce (trailing): run once after events stop
function debounce(fn, wait) {
let t = null;
return function (...args) {
clearTimeout(t);
t = setTimeout(function () {
fn.apply(null, args);
}, wait);
};
}
// Simulate rapid events: only the last triggers the call
const debouncedLog = debounce(function (msg) {
console.log("debounced:", msg);
}, 10);
for (let i = 0; i < 5; i++) {
setTimeout(function () {
debouncedLog("final after bursts");
}, i * 3);
}

डिबाउंस (शुरुआती)
शुरुआती डिबाउंस तुरंत चलता है, फिर शांत अवधि समाप्त होने तक दोहराव रोक देता है।
// Debounce (leading): first call fires immediately, then ignore until quiet
function debounceLeading(fn, wait) {
let t = null;
return function (...args) {
if (t === null) {
fn.apply(null, args);
}
clearTimeout(t);
t = setTimeout(function () {
t = null;
}, wait);
};
}
// Demo: first call prints quickly; later bursts are ignored until quiet
const firstTap = debounceLeading(function (x) {
console.log("leading:", x);
}, 12);
for (let i = 0; i < 4; i++) {
setTimeout(function () {
firstTap("first-then-wait");
}, i * 3);
}

थ्रॉटल (शुरुआती)
थ्रॉटल कॉल को हर समय-अवधि में एक तक सीमित करता है और अतिरिक्त कॉल हटा देता है।
// Throttle (leading): at most once per interval
function throttle(fn, wait) {
let last = 0;
return function (...args) {
const now = Date.now();
if (now - last >= wait) {
last = now;
fn.apply(null, args);
}
};
}
// Demo: many events, but prints at most once every 10ms
const throttled = throttle(function (n) {
console.log("throttled:", n);
}, 10);
for (let i = 0; i < 10; i++) {
setTimeout(function () {
throttled(i);
}, i * 2);
}

थ्रॉटल (अंतिम)
अंतिम थ्रॉटल यह सुनिश्चित करता है कि अवधि के अंत में आपको नवीनतम मान फिर भी मिल जाए।
// Throttle (trailing): schedule the last call within the window
function throttleTrailing(fn, wait) {
let last = 0;
let timer = null;
let queuedArgs = null;
function invoke(args) {
last = Date.now();
fn.apply(null, args);
}
return function (...args) {
const now = Date.now();
const remaining = wait - (now - last);
if (remaining <= 0) {
// Window passed: run now
clearTimeout(timer);
timer = null;
queuedArgs = null;
invoke(args);
} else {
// Queue the latest args to run at the end of the window
queuedArgs = args;
clearTimeout(timer);
timer = setTimeout(function () {
timer = null;
if (queuedArgs) {
invoke(queuedArgs);
queuedArgs = null;
}
}, remaining);
}
};
}
// Demo: last value in a burst is printed after the window
const trail = throttleTrailing(function (x) {
console.log("trail:", x);
}, 10);
for (let i = 0; i < 6; i++) {
setTimeout(function () {
trail("v" + i);
}, i * 3);
}

किसका उपयोग कब करें?
चयन:
- डिबाउंस: टाइप करते समय खोज, आकार बदलना — उपयोगकर्ता के रुकने के बाद चलाएँ।
- थ्रॉटल: स्क्रॉल/खींचना — कॉल को स्थिर गति तक सीमित करें।
- तुरंत प्रतिक्रिया के लिए शुरुआती; अंतिम मान पाने के लिए अंतिम।

डिबाउंस बनाम थ्रॉटल—प्रश्नोत्तरी
त्वरित जाँच: प्रत्येक अवधि में कॉल सीमित करना।

पुनरावलोकन
पुनरावलोकन: आपने अंतिम और शुरुआती डिबाउंस, एक सरल शुरुआती थ्रॉटल और हल्का अंतिम थ्रॉटल लिखा। “उपयोगकर्ता के रुकने के बाद” के लिए डिबाउंस और “स्थिर गति” के लिए थ्रॉटल चुनें।

एआई शिक्षक के साथ JavaScript सीखें — निःशुल्क
अपने ब्राउज़र में वास्तविक कोड लिखें और चलाएँ, चौबीसों घंटे एआई शिक्षक से तुरंत सहायता पाएँ, और वेब या ऐप पर वहीं से शुरू करें जहाँ आपने छोड़ा था।
- पाठ्यक्रम
- 59
- पाठ
- 200
अक्सर पूछे जाने वाले प्रश्न
क्या “डिबाउंस बनाम थ्रॉटल — स्वयं बनाना” पाठ निःशुल्क है?
हाँ — JavaScript Academy अध्ययन पथ के 3 तक कोई भी पाठ, जिसमें “डिबाउंस बनाम थ्रॉटल — स्वयं बनाना” भी शामिल है, यहाँ वेब पर पूरा पढ़ना निःशुल्क है। इसके बाद CoddyKit PRO हर पाठ अनलॉक करता है, साथ ही अंतर्निर्मित कोड संपादक और चौबीसों घंटे एआई शिक्षक के साथ इंटरैक्टिव अभ्यास भी उपलब्ध कराता है। JavaScript Academy पाठ्यक्रम में कुल 3 पाठ शामिल हैं।
“डिबाउंस बनाम थ्रॉटल — स्वयं बनाना” में मैं क्या सीखूँगा?
छोटी डिबाउंस और थ्रॉटल उपयोगिताएँ बनाएँ। ट्रेलिंग और लीडिंग रूपों का अभ्यास करें तथा जानें कि किसे कब चुनना है। आप ब्राउज़र में सीधे चलाए जाने वाले व्यावहारिक कोड के साथ JavaScript Academy का अभ्यास करते हैं, और पाठ पूरा करते समय 24/7 एआई ट्यूटर आपके प्रश्नों के उत्तर देता है।
क्या JavaScript Academy शुरू करने के लिए मुझे किसी अनुभव की आवश्यकता है?
पहले के अनुभव की आवश्यकता नहीं है। CoddyKit पर JavaScript Academy शुरुआती से लेकर उन्नत शिक्षार्थियों तक सभी के लिए व्यवस्थित किया गया है, इसलिए आप यहीं से या शुरुआत से सीखना शुरू कर सकते हैं और अपनी गति से आगे बढ़ सकते हैं। यह 3 में से 2वाँ पाठ है।
“डिबाउंस बनाम थ्रॉटल — स्वयं बनाना” पाठ पूरा करने में कितना समय लगता है?
CoddyKit का अधिकांश पाठ लगभग 5–10 मिनट में पूरा हो जाता है। हर पाठ छोटा और संवादात्मक है, इसलिए आप लगातार प्रगति करते हैं और वेब या ऐप पर वहीं से सीखना जारी रख सकते हैं जहाँ आपने छोड़ा था।
क्या मैं इस JavaScript Academy पाठ में कोड लिख और चला सकता हूँ?
हाँ। हर JavaScript Academy पाठ में एक अंतर्निर्मित कोड संपादक शामिल है, जिससे आप सीधे अपने ब्राउज़र में वास्तविक कोड लिख और चला सकते हैं और तुरंत एआई प्रतिक्रिया पा सकते हैं—स्थानीय सेटअप की आवश्यकता नहीं है।
इस पाठ्यक्रम के सभी पाठ
- setTimeout, setInterval और टाइमर का खिसकाव
- डिबाउंस बनाम थ्रॉटल — स्वयं बनाना
- एनीमेशन टाइमिंग — समय-आधारित लूप का परिचय