डिबाउंसिंग
बहस करना ब्राउज़र के प्रदर्शन को बढ़ाने के लिए अनावश्यक समय लेने वाली संगणनाओं को कम करने के अलावा और कुछ नहीं है। ऐसे कुछ परिदृश्य हैं जिनमें कुछ प्रकार्यों को एक निश्चित ऑपरेशन को निष्पादित करने में अधिक समय लगता है। उदाहरण के लिए, खोज बार . का उदाहरण लें एक ई-कॉमर्स वेबसाइट में।
संक्षिप्त जानकारी
मान लीजिए कि कोई उपयोगकर्ता "ट्यूटोरिक्स स्टडी किट" get प्राप्त करना चाहता है . वह सर्च बार में प्रोडक्ट के हर कैरेक्टर को टाइप करता है। प्रत्येक वर्ण को टाइप करने के बाद, एक एपी . होता है आवश्यक उत्पाद प्राप्त करने के लिए ब्राउज़र से सर्वर पर कॉलिंग होती है। चूंकि वह "ट्यूटोरिक्स स्टडी किट" चाहता है, उपयोगकर्ता को ब्राउज़र से सर्वर पर 17 एपीआई कॉल करना पड़ता है। एक परिदृश्य के बारे में सोचें कि जब लाखों लोग एपीआई के अरबों को कॉल करके वहां एक ही खोज कर रहे हों . इसलिए एक बार में अरबों Api को कॉल करने से निश्चित रूप से ब्राउज़र का प्रदर्शन धीमा हो जाएगा। . इस कमी को कम करने के लिए, डिबाउंसिंग तस्वीर में आता है।
इस परिदृश्य में, डिबाउंसिंग दो कीस्ट्रोक्स के बीच, मान लीजिए 2 सेकंड के लिए एक समय अंतराल सेट करेगा। यदि दो कीस्ट्रोक्स के बीच का समय 2 सेकंड से अधिक है, तो केवल एपी कॉलिंग होगी। उन 2 सेकंड में उपयोगकर्ता कम से कम कुछ वर्ण टाइप कर सकता है, उन वर्णों को कम करके एपीआई कॉलिंग। चूंकि एपीआई कॉलिंग कम हो गई है, इसलिए ब्राउज़र का प्रदर्शन बढ़ जाएगा। किसी को ध्यान देना चाहिए कि बहस प्रत्येक कुंजी स्ट्रोक के लिए फ़ंक्शन अपडेट।
उदाहरण सारांश
निम्नलिखित उदाहरण में एक बटन एक ईवेंट श्रोता से जुड़ा हुआ है जो एक बहस . कहता है समारोह। बहस फ़ंक्शन 2 मापदंडों के साथ प्रदान किया जाता है, एक एक फ़ंक्शन है और दूसरा एक संख्या (समय)। एक टाइमर घोषित किया जाता है, जैसा कि नाम से पता चलता है कॉल बहस एक निश्चित समय के बाद काम करते हैं।
एक बार बहस बटन क्लिक करने पर एक अलर्ट बॉक्स खुलता है और एक संदेश प्रदर्शित करता है। फ़ंक्शन हर बार अपडेट होता है जिसका अर्थ है कि यदि बटन विलंब समय (2 सेकंड) से पहले क्लिक किया जाता है, तो प्रारंभिक टाइमर साफ़ हो जाएगा और नया टाइमर शुरू हो जाएगा। इस कार्य को प्राप्त करने के लिए clearTimeOut() फ़ंक्शन का उपयोग किया जाता है।
उदाहरण
<html>
<body>
<input type = "button" id="debounce" value = "Debounce">
<script>
var button = document.getElementById("debounce");
var debounce = (func, delay) => {
let Timer
return function() {
const context = this
const args = arguments
clearTimeout(Timer)Timer= setTimeout(() =>
func.apply(context, args), delay)
}
}
button.addEventListener('click', debounce(function() {
alert("Hello\nNo matter how many times you" +
"click the debounce button, I get " +"executed once every 2 seconds!!")}, 2000));
</script>
</body>
</html> उपरोक्त फ़ंक्शन को निष्पादित करने के बाद निम्न बटन प्रदर्शित होगा
बटन पर क्लिक करने और 2 सेकंड तक प्रतीक्षा करने के बाद निम्न अलर्ट बॉक्स आउटपुट के रूप में प्रदर्शित होगा।
आउटपुट
