थ्रॉटलिंग और डिबेंचिंग के बीच अंतर

251

क्या कोई मुझे दर-सीमित उद्देश्यों के लिए एक थ्रॉटलिंग और डिबेंचिंग के बीच के अंतर के बारे में सरल-सरल शब्दों में स्पष्टीकरण दे सकता है।

मेरे लिए दोनों एक ही काम करते हैं। मैंने यह पता लगाने के लिए इन दो ब्लॉगों की जाँच की है:

http://remysharp.com/2010/07/21/throttling-function-calls

http://benalman.com/projects/jquery-throttle-debounce-plugin/

javascript

— bhavya_w
स्रोत

102

Demo.nimius.net/debounce_throttle एक अच्छा दृश्य है

— thriqon

4

@thriqon कि विज़ुअलाइज़ेशन मेरे विवरण से बेहतर है।

— डोनाल्ड

हाँ, इसने मुझे इस अवधारणा को समझने में मदद की ... मूल लेखक के लिए +1 ;-)

— thriqon

बहुत सरल उदाहरण जिसने मुझे समझने में मदद की। jsfiddle.net/Voronar/sxjy25ew/1

— किरिल ए। खलीतोव

1

यहाँ विज़ुअलाइज़ेशन देख सकते हैं साथ ही कोडपेन.io

— chriscoyier

346

इसे सरल शब्दों में कहें:

थ्रॉटलिंग एक फ़ंक्शन को निष्पादित करने में देरी करेगा। यह कई बार आग लगाने वाली घटना की सूचनाओं को कम कर देगा।
डिबेंचिंग एक फंक्शन में अनुक्रमिक कॉल की एक श्रृंखला को उस फ़ंक्शन के एकल कॉल में गुच्छा देगा। यह सुनिश्चित करता है कि एक अधिसूचना कई बार आग लगने वाली घटना के लिए बनाई जाती है।

आप यहां अंतर देख सकते हैं

यदि आपके पास एक फ़ंक्शन है जिसे बहुत कहा जाता है - उदाहरण के लिए जब एक आकार बदलने या माउस चालन घटना होती है, तो इसे बहुत बार कहा जा सकता है। यदि आप इस व्यवहार को नहीं चाहते हैं, तो आप इसे थ्रॉटल कर सकते हैं ताकि फ़ंक्शन को नियमित अंतराल पर बुलाया जाए। डिबॉन्सेसिंग का अर्थ होगा कि इसे घटनाओं के एक समूह के अंत (या प्रारंभ) में कहा जाता है।

— डोनल
स्रोत

9

मुझे लगता है कि थ्रिकॉन के विज़ुअलाइज़ेशन लिंक से पता चलता है कि यह बहुत अच्छी तरह से कैसे काम करता है। यदि आपके पास एक फ़ंक्शन है जिसे बहुत कहा जाता है - उदाहरण के लिए जब एक आकार बदलने या माउस चालन घटना होती है, तो इसे बहुत बार कहा जा सकता है। यदि आप यह नहीं चाहते हैं, तो आप इसे थ्रॉटल कर सकते हैं ताकि फ़ंक्शन को नियमित अंतराल पर बुलाया जाए। डिबॉन्सेसिंग का मतलब होगा कि यह कॉल के एक समूह के अंत (या प्रारंभ) में कहा जाता है।

— डोनाल्ड

10

@AdamM। विज़ुअलाइज़ेशन पर एक नज़र डालें: Demo.nimius.net/debounce_throttle

— Donal

2

@AdamM। नहीं। आप अपने माउस को डेमो में स्थानांतरित करके , और हर बार एक बार में माउस की गति को रोककर इसकी कल्पना कर सकते हैं । Debounce-बार "टिक" जाएगा के बाद आप सभी माउस आंदोलन बंद कर दिया है, जबकि थ्रोटल-बार "टिक टिक" रखेंगे जबकि माउस को ले जाता है, लेकिन एक कम (से रोक दिए) दर पर।

— जॉन वीज़्ज़

26

मैं पूरी तरह से दृश्य को कम करता हूं। धन्यवाद!

— सममी

4

लिंक हजार शब्दों की तुलना में अधिक मूल्यवान है

— चालाकी

148

व्यक्तिगत रूप से मुझे थ्रॉटल की तुलना में समझ में आना कठिन था ।

चूंकि दोनों फ़ंक्शन आपको स्थगित करने और कुछ निष्पादन की दर को कम करने में मदद करते हैं। मान लें कि आप बार-बार थ्रॉटल / डेब्यू द्वारा लौटाए गए सजाए गए कार्यों को बुला रहे हैं ...

थ्रॉटल : मूल फ़ंक्शन को निर्दिष्ट अवधि के अनुसार अधिकतम एक बार कहा जाता है।
डेब्यू : मूल फ़ंक्शन को कॉल किया जाना चाहिए क्योंकि निर्दिष्ट अवधि के बाद कॉलर ने सजाए गए फ़ंक्शन को कॉल करना बंद कर दिया ।

मैंने लक्ष्य को हासिल करने के लिए महत्वपूर्ण बहस का अंतिम भाग पाया। मुझे _.debounce के कार्यान्वयन का एक पुराना संस्करण भी मिला जो समझ को समझने में मदद करता है ( https://davidwalsh.name/function-debounce के शिष्टाचार )।

// Returns a function, that, as long as it continues to be invoked, will not
// be triggered. The function will be called after it stops being called for
// N milliseconds. If `immediate` is passed, trigger the function on the
// leading edge, instead of the trailing.
_.debounce = function(func, wait, immediate) {
  var timeout;
  return function() {
    var context = this, args = arguments;
    var later = function() {
        timeout = null;
        if (!immediate) func.apply(context, args);
    };
    var callNow = immediate && !timeout;
    clearTimeout(timeout);
    timeout = setTimeout(later, wait);
    if (callNow) func.apply(context, args);
  };
};

एक दूर का रूपक, लेकिन शायद यह भी मदद कर सकता है।

आपका एक दोस्त है जिसका नाम चैट्टी है जो IM के माध्यम से आपके साथ बात करना पसंद करता है। यह मानते हुए कि जब वह बात करती है, तो वह हर 5 सेकंड में एक नया संदेश भेजता है, जबकि आपका आईएम एप्लिकेशन आइकन ऊपर और नीचे उछल रहा है, आप इसे ले सकते हैं ...

Naive approach: जब तक यह आता है हर संदेश की जाँच करें। जब आपका ऐप आइकन बाउंस हो जाए, तो चेक करें। यह सबसे प्रभावी तरीका नहीं है, लेकिन आप हमेशा अप-टू-डेट रहते हैं।
थ्रोटल दृष्टिकोण: आप हर 5 मिनट में एक बार जांच करते हैं (जब नए होते हैं)। जब नया संदेश आता है, यदि आपने पिछले 5 मिनट में कभी भी जाँच की है, तो इसे अनदेखा करें। आप इस दृष्टिकोण के साथ अपना समय बचाते हैं, जबकि अभी भी लूप में हैं।
डेब्यू अप्रोच: आप चैट्टी को जानते हैं, वह एक पूरी कहानी को टुकड़ों में तोड़ती है, उन्हें एक के बाद एक मैसेज में भेजती है। आप तब तक इंतजार करते हैं जब तक चैट्टी पूरी कहानी खत्म नहीं कर देती: यदि वह 5 मिनट के लिए संदेश भेजना बंद कर देती है, तो आप मान लेंगे कि वह पूरी हो चुकी है, अब आप सभी की जांच करें।

— दापेंग ली
स्रोत

17

जब तक मैंने इसे नहीं पढ़ा, तब तक इन 2 कार्यों के बीच अंतर को नहीं समझा। धन्यवाद

— सीमस बैरेट

7

रूपक उदाहरण के सबसे महान टुकड़ों में से एक है जिसे मैंने कभी गला घोंटना और बहस के बारे में पढ़ा है। धन्यवाद।

— विग्नेश

96

मतभेद

+--------------+-------------------+-------------------+
|              |  Throttle 1 sec   |  Debounce 1 sec   |
+--------------+-------------------+-------------------+
| Delay        | no delay          | 1 sec delay       |
|              |                   |                   |
| Emits new if | last was emitted  | there is no input |
|              | before 1 sec      |  in last 1 sec    |
+--------------+-------------------+-------------------+

उपयोग मामले द्वारा स्पष्टीकरण :

खोज बार- हर बार उपयोगकर्ता प्रेस की खोज करना नहीं चाहता है? जब उपयोगकर्ता 1 सेकंड के लिए लिखना बंद कर देता है, तो उसे खोजना चाहते हैं। debounceकुंजी प्रेस पर 1 सेकंड का उपयोग करें ।
शूटिंग गेम- पिस्टल प्रत्येक शॉट के बीच 1 सेकंड का समय लेता है लेकिन उपयोगकर्ता कई बार माउस क्लिक करता है। का प्रयोग करें throttleमाउस क्लिक पर।

अपनी भूमिकाओं को उलटते हुए :

खोज पट्टी पर थ्रॉटलिंग 1 सेकंड - यदि उपयोगकर्ता abcdefghijप्रत्येक वर्ण के साथ टाइप करते हैं 0.6 sec। तब थ्रोटल पहले aप्रेस पर ट्रिगर होगा । यह अगले 1 सेकंड के लिए हर प्रेस को bनजरअंदाज करेगा। 6 सेकंड में नजरअंदाज कर दिया जाएगा। फिरc 1.2 सेकंड पर फिर से ट्रिगर होगा, जो फिर से समय को रीसेट करता है। तो dनजरअंदाज कर दिया eजाएगा और ट्रिगर हो जाएगा।
1 सेकंड के लिए पिस्तौल का प्रदर्शन करते हुए- जब उपयोगकर्ता किसी दुश्मन को देखता है, तो वह माउस क्लिक करता है, लेकिन यह शूट नहीं करेगा। वह उस सेकंड में कई बार फिर से क्लिक करेगा लेकिन यह शूट नहीं करेगा। वह यह देखेगा कि क्या अभी भी गोलियां हैं, उस समय (अंतिम क्लिक के बाद 1 सेकंड) पिस्तौल अपने आप फायर हो जाएगी।

— amit77309
स्रोत

37

थ्रॉटलिंग एक फ़ंक्शन को समय के साथ अधिकतम संख्या में लागू करता है। जैसा कि "प्रत्येक 100 मिलीसेकंड पर एक बार इस फ़ंक्शन को निष्पादित करें।"

यह कहते हुए कि एक समारोह को फिर से तब तक नहीं बुलाया जाएगा जब तक कि एक निश्चित समय बीत चुका हो, जब तक कि उसे बुलाया नहीं जाए। जैसा कि "इस फ़ंक्शन को केवल तभी निष्पादित करें यदि 100 मिलीसेकंड इसे पारित किए बिना पारित किया गया हो।"

संदर्भ

— अंशुल
स्रोत

20

थ्रॉटल (1 सेकंड): हैलो, मैं एक रोबोट हूं। जब तक आप मुझसे पिंग करते रहेंगे, मैं आपसे बात करता रहूंगा, लेकिन ठीक 1 सेकंड बाद। यदि आप मुझे उत्तर देने से पहले एक दूसरे के लिए छोड़ दें, तो मैं अभी भी आपको 1 सेकंड के अंतराल पर जवाब दूंगा। दूसरे शब्दों में, मुझे सिर्फ सटीक अंतराल पर जवाब देना पसंद है।

डेब्यू (1 सेकंड): हाय, मैं वह ^ ^ रोबोट का चचेरा भाई हूं। जब तक आप मुझे पिंग करते रहेंगे, मैं चुप रहने वाला हूं क्योंकि मुझे 1 सेकंड के बाद ही जवाब देना पसंद है क्योंकि पिछली बार आपने मुझे पिंग किया था । मुझे नहीं पता, अगर यह है क्योंकि मुझे एक रवैया समस्या है या क्योंकि मुझे सिर्फ लोगों को बाधित करना पसंद नहीं है। दूसरे शब्दों में, यदि आप मुझे अपने अंतिम आह्वान के बाद 1 सेकंड से पहले जवाब देने के लिए कहते रहते हैं, तो आपको कभी जवाब नहीं मिलेगा। हाँ हाँ ... आगे बढ़ो! मुझे अशिष्ट कहो।

थ्रॉटल (10 मिनट): मैं एक लॉगिंग मशीन हूं। मैं 10 मिनट के नियमित अंतराल के बाद हमारे बैकेंड सर्वर पर सिस्टम लॉग भेजता हूं।

डेब्यू (10 सेकंड): हाय, मैं उस लॉगिंग मशीन का चचेरा भाई नहीं हूं। (हर नहीं debouncer एक से संबंधित है throttler इस काल्पनिक दुनिया में)। मैं पास के एक रेस्तरां में वेटर का काम करता हूं। मुझे आपको यह बताना चाहिए कि जब तक आप अपने ऑर्डर में सामान जोड़ते रहेंगे, मैं आपके ऑर्डर के निष्पादन के लिए रसोई में नहीं जाऊंगा। केवल जब आपके आदेश को अंतिम बार संशोधित करने के बाद 10 सेकंड बीत चुके हैं, तो मैं मान लूंगा कि आप अपने आदेश के साथ कर रहे हैं। तभी मैं आपके आदेश का पालन रसोई में करूंगा।

कूल डेमोस: https://css-tricks.com/debouncing-throttling-explained-examples/

वेटर सादृश्य के लिए क्रेडिट: https://codeburst.io/throttling-and-debouncing-in-javascript-b01cad5c8edf

— उस्मान
स्रोत

1

सबसे अच्छी व्याख्या।

— करण शर्मा

17

डिबॉन्सेसिंग आपको कॉल की आवृत्ति को प्रबंधित करने की अनुमति देता है जो एक फ़ंक्शन प्राप्त कर सकता है। यह एक दिए गए फ़ंक्शन पर होने वाली कई कॉलों को जोड़ती है ताकि एक विशिष्ट समय अवधि की समाप्ति से पहले होने वाली बार-बार कॉल को अनदेखा कर दिया जाए। मूल रूप से डिबगिंग यह सुनिश्चित करता है कि एक घटना के लिए ठीक एक संकेत भेजा जाता है जो कई बार हो रहा है।

थ्रॉटलिंग उन कॉल की आवृत्ति को प्रतिबंधित करता है जो एक फ़ंक्शन एक निश्चित समय अंतराल को प्राप्त करता है। इसका उपयोग यह सुनिश्चित करने के लिए किया जाता है कि लक्ष्य फ़ंक्शन निर्दिष्ट देरी से अधिक बार लागू नहीं किया गया है। थ्रॉटलिंग एक दोहराई जाने वाली घटना की दर में कमी है।

— GibboK
स्रोत

17

यह आसान है।

वे सटीक एक ही काम करते हैं (दर सीमित) को छोड़कर जब थ्रॉटल कहा जा रहा है तो यह आपके लिपटे फ़ंक्शन को समय-समय पर आग देगा, और बहस करें नहीं होगी। डेब्यू सिर्फ (अंत करने की कोशिश करता है) अपने फ़ंक्शन को एक बार बहुत अंत में कॉल करें।

उदाहरण : यदि आप स्क्रॉल कर रहे हैं, तो स्क्रॉल करते समय थ्रोटल धीरे-धीरे आपके फ़ंक्शन को कॉल करेगा (प्रत्येक एक्स मिलीसेकंड)। आपके फ़ंक्शन को कॉल करने के लिए स्क्रॉल करने के बाद डेब्यू का इंतजार होगा।

— रयान टेलर
स्रोत

यह ध्यान देने योग्य है कि इन डेमो में, वे "समान" नहीं दिख सकते हैं क्योंकि अंतिम घटना के बाद बहस हमेशा एक्स मिलीसेकंड में आग लगाएगी, जबकि थ्रॉटल की आखिरी कॉल जल्द ही हो सकती है (और इसे फिर से कॉल करने की आवश्यकता नहीं है जब बहस आम तौर पर आग होगी )। यदि आप डेमो को देखते हैं तो यह बहुत ही असंगत है, लेकिन ध्यान देने योग्य है।

— रायन टेलर

16

आम आदमी की शर्तों में:

डिबॉन्शिंग एक फ़ंक्शन को चलने से रोक देगा जबकि इसे अभी भी अक्सर कहा जा रहा है। एक विवादास्पद फ़ंक्शन केवल यह निर्धारित करने के बाद ही चलेगा कि यह अब कॉल नहीं किया जा रहा है, जिस बिंदु पर यह ठीक एक बार चलेगा। डिबगिंग के व्यावहारिक उदाहरण:

यदि उपयोगकर्ता "टाइप करना बंद" कर रहा है, तो टेक्स्ट-फ़ील्ड की सामग्री को ऑटो-सेविंग या वैरिफाई करना: ऑपरेशन केवल एक बार किया जाएगा, यह निर्धारित करने के बाद कि उपयोगकर्ता अब टाइपिंग नहीं कर रहा है (अब कुंजी दबाकर नहीं)।
लॉगिंग जहां उपयोगकर्ता अपने माउस को आराम करते हैं: उपयोगकर्ता अब अपने माउस को स्थानांतरित नहीं कर रहा है, इसलिए (अंतिम) स्थिति लॉग की जा सकती है।

थ्रॉटलिंग एक फ़ंक्शन को चलने से रोकेगा यदि वह हाल ही में कॉल आवृत्ति की परवाह किए बिना चला है। थ्रॉटलिंग के व्यावहारिक उदाहरण:

वी-सिंक के कार्यान्वयन थ्रॉटलिंग पर आधारित हैं: स्क्रीन केवल तभी खींची जाएगी जब अंतिम स्क्रीन ड्रॉ के बाद से 16ms बीत चुके हों। कोई फर्क नहीं पड़ता कि स्क्रीन रिफ्रेश कार्यक्षमता को कितनी बार कहा जाता है, यह केवल प्रत्येक 16ms पर अधिकतम एक बार चलेगा।

— जॉन वीज़
स्रोत

7

एक वास्तविक जीवन सादृश्य जो व्यक्तिगत रूप से मुझे याद रखने में मदद करता है:

बहस = एक बातचीत । जवाब देने से पहले आप दूसरे व्यक्ति के बोलने का इंतजार करते हैं।
थ्रोटल = एक ड्रम बिट । आप केवल 4/4 ड्रम बिट पर नोट्स खेलते हैं।

विवाद के मामलों का उपयोग करें :

टंकण। उपयोगकर्ता द्वारा लिखना बंद करने के बाद आप कुछ करना चाहते हैं। तो आखिरी कीस्ट्रोक के बाद 1sec का इंतज़ार करना समझ में आता है। प्रत्येक कीस्ट्रोक प्रतीक्षा को पुनः आरंभ करता है।
एनीमेशन। उपयोगकर्ता द्वारा इस पर मंडराना बंद करने के बाद आप किसी तत्व को वापस सिकोड़ना चाहते हैं। डेबिट का उपयोग न करने से कर्सर का एक परिणाम के रूप में अनजाने में "हॉट" और "कोल्ड" ज़ोन के बीच बढ़ने के कारण एक अनिश्चित एनीमेशन हो सकता है।

थ्रॉटल के मामलों का उपयोग करें :

स्क्रॉल। आप स्क्रॉल करने पर प्रतिक्रिया करना चाहते हैं, लेकिन किए गए गणना की मात्रा को सीमित करते हैं, इसलिए हर 100ms में कुछ करना संभावित अंतराल को रोकने के लिए पर्याप्त है।
मूषक चाल।स्क्रॉलिंग के समान लेकिन माउस चाल के लिए।
एपीआई कॉल आप कुछ यूआई घटनाओं पर एपीआई कॉल को फायर करना चाहते हैं लेकिन आप अपने सर्वर को अधिभार नहीं देने के लिए एपीआई कॉल की संख्या को सीमित करना चाहते हैं।

— लड़का
स्रोत

4

throtle बस के चारों ओर एक आवरण है debounce जो बनाता है debounce पारित कर दिया कॉल करने के लिए functionसमय की कुछ अवधि में, अगर debounce विलंब समय जो बड़ा तो में निर्दिष्ट है की अवधि पर एक समारोह कॉल throtle ।

— ओलेग त्सिबा
स्रोत

3

lodash लाइब्रेरी निम्नलिखित लेख से पता चलता है https://css-tricks.com/debouncing-throttling-explained-examples/ जो विस्तृत के बीच अंतर की व्याख्या Debounceऔर Throttleऔर उनके व्युत्पत्ति

— नव
स्रोत

2

थ्रॉटलिंग

थ्रॉटलिंग एक फ़ंक्शन की अधिकतम संख्या को लागू करता है जिसे ओवरटाइम कहा जा सकता है। जैसा कि "प्रत्येक 100 मिलीसेकंड पर एक बार इस फ़ंक्शन को निष्पादित करें।" सामान्य परिस्थितियों में कहें कि आप इस फ़ंक्शन को 10 सेकंड में 1,000 बार कॉल करेंगे। यदि आप इसे केवल एक बार प्रति 100 मिलीसेकंड पर थ्रॉटल करते हैं, तो यह केवल उस फ़ंक्शन को अधिकतम 100 बार निष्पादित करेगा

(10s * 1,000) = 10,000ms
10,000ms / 100ms throttling = 100 maximum calls

Debouncing

यह कहते हुए कि एक समारोह को फिर से तब तक नहीं बुलाया जाएगा जब तक कि एक निश्चित समय बीत चुका हो, जब तक कि उसे बुलाया नहीं जाए। जैसा कि "इस फ़ंक्शन को केवल तभी निष्पादित करें यदि 100 मिलीसेकंड इसे पारित किए बिना पारित किया गया हो।"

शायद एक कार्य त्वरित विस्फोट में 1,000 बार कहा जाता है, 3 सेकंड में फैलाया जाता है, फिर बुलाया जाना बंद हो जाता है। यदि आप इसे 100 मिलीसेकंड पर बहस कर चुके हैं, तो फ़ंक्शन केवल 3.1 सेकंड में, एक बार फटने पर आग लग जाएगा। हर बार फ़ंक्शन को कॉल करने के दौरान फटने के बाद यह डिबगिंग टाइमर को रीसेट करता है

स्रोत: - गला घोंटना और बहस करना

— bajran
स्रोत

2

मान लें कि हमारे पास "ई" पर कॉल करने के लिए एक कॉलबैक फ़ंक्शन "सीबी" है। 1 सेकंड में "E" को 1000 बार ट्रिगर होने दें, इसलिए "cb" में 1000 कॉल होंगे। वह 1 कॉल / एमएस है। अनुकूलित करने के लिए हम या तो उपयोग कर सकते हैं:

थ्रॉटलिंग : थ्रॉटलिंग ऑफ़ (100ms) के साथ, "सीबी" को [100 वें एमएस, 200 वें एमएस, 300 वें एमएस, ... 1000 वें एमएस] पर बुलाया जाएगा। यह 1 कॉल / 100 एमएस है। यहां 1000 कॉल "cb" को 10 कॉल के लिए अनुकूलित किया गया है।
डिबगिंग : (100ms) की डिबॉन्डिंग के साथ, "cb" को केवल एक बार [1100 वीं सेकंड] कहा जाएगा। यह "ई" के अंतिम ट्रिगर के बाद 100ms है जो [1000 वें एमएस] पर खुश है। यहां 1000 कॉल "सीबी" को 1 कॉल के लिए अनुकूलित किया गया है।

— नेट जीयो
स्रोत

1

जहां तक मैं समझता हूं, सरल शब्दों में थ्रॉटलिंग - निश्चित समय के लिए सेटइंटरवल (कॉलबैक) के समान है। ईवेंट की घटना पर समय के साथ निश्चित समय के लिए एक ही फ़ंक्शन को कॉल करना और .. डिबेट करना - कॉलिंगटेमाउट (कॉलबैकफॉरएपी) के समान। या घटना के घटने पर निश्चित समय बीत जाने के बाद किसी समारोह को बुलाना। यह लिंक मददगार हो सकता है- https://css-tricks.com/the-difference-between-throttling-and-debouncing/

— प्रणय बिंजू
स्रोत