Introduction
हेलो दोस्तों आज हम इस post में Javascript की Debouncing technique के बारे में जानेगे!. Debouncing क्या है? और इसका इस्तेमाल कैसे और कब किया जाता है!.
What is Debounce (Debounce क्या है?)
Debouncing javascript में इस्तेमाल की जाने वाली एक technique है, जिसका इस्तेमाल किसी function को specific time के लिए delay करके execute करता है!. जिससे function का execution time rate limit होता है!. जब कोय event बार-बार trigger होता है, जैसे की कोय user button per click करता है या input filed में type करता है या किसी page per scroll करता है, तो उसके related function को कई बार fire call करता है, जिससे performance related समस्या हो सकती है!. तो ऐसी समस्या के लिए हम Debouncing का इस्तेमाल कर सकते है!. Debouncing function के execution को तब तक delay करके मदद करता है जब तब की Debouncing function का delay समय बीत न जाये!.
Debouncing का इस्तेमाल कहा कहा होता है?
Debouncing का इस्तिमाल उन scenarios में होता है जहाँ events frequently trigger होते हैं, और हमें उन्हें control करना होता है ताके कोई function repeatedly और unnecessary call ना हो. इस technique का primary मकसद application की performance को बेहतर बनाना होता है और heavy tasks को optimize करना होता है!.
Debouncing का बोहोत ज़्यादा इस्तेमाल इन scenarios में होता है!.
Input search bar: Input search bar field में user की typing finish होने बाद API call को call करता है!.
Window Resizing events: Resize event frequently trigger होता है और हर resize के साथ function execute होता है जिससे performance issues आते हैं तो Debouncing का इस्तेमाल कर के हम ensure करते हैं के जब user resize करना रोक दे, तभी function call हो!.
Scroll events: User के द्वारा scroll करते time हरबार function call से बचाना. Debouncing का
इस्तेमाल करके हम ensure करते हैं के scroll होने के बाद कुछ delay के बाद ही function execute हो!.
Debouncing कैसे work करता है?
Debouncing एक ऐसी technique है जो function execution को delay करती है जब तक एक specific time interval के लिए कोई further event trigger ना हो. यह technique किसी function को repeatedly call होने से रोकने के लिए काम आती है, जब कोई event frequently fire हो रहा हो, जैसे typing, scrolling, resizing, API calls जैसी!.
जब हम debouncing apply करते हैं, तो function को call करने के बजाये एक timer set कर देते हैं!. अगर इस time के दौरान कोई नया event trigger हो जाता है, तो पहला timer reset हो जाता है और एक नया timer set होता है!. यह process तब तक repeat होता है जब तक user event को trigger करते रहता है!. जब एक specific time तक कोई नया event trigger नहीं होता, तब function execute होता है!.
हम Flipkart, amazon जैसी बड़ी website में देख सकते है की इन website में product search करते टाइम वे हर time हर input field के value पर API call नहीं करते है! बल्कि specific time के बाद API call करते है जिसे इन site का search result performance बहुत बढ़िया होता है!.
Example
तो हम Debouncing को एक example के साथ समझेंगे यहा एक input field लेंगे, जहां हम चाहते हैं के API call तब करें जब user ने typing करना temporarily रोक दिया हो, हम debounce का उसे करेंगे!. तो यहा दोनों example देखेंगे without debounce और with debounce के साथ!.
HTML code
<!DOCTYPE html> <html> <head> <meta charset='utf-8'> <meta http-equiv='X-UA-Compatible' content='IE=edge'> <title>Seach bar input field</title> <meta name='viewport' content='width=device-width, initial-scale=1'> <style> * { margin: 0; padding: 0; box-sizing: border-box; } body { display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f4f4f9; font-family: 'Arial', sans-serif; } .search-container { position: relative; width: 300px; } .search-input { width: 100%; padding: 12px 45px 12px 15px; border: 2px solid #ddd; border-radius: 30px; font-size: 16px; outline: none; background: linear-gradient(90deg, #fff, #f7f7f7); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); transition: border-color 0.3s ease; } .search-input:focus { border-color: #3f8bfc; } .search-btn { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); border: none; background: none; cursor: pointer; } .search-btn img { width: 20px; height: 20px; } .search-btn:focus { outline: none; } </style> </head> <body> <div class="main"> <div class="search-container"> <input type="text" id="searchInput" class="search-input" placeholder="Search here..."> <button class="search-btn"> <img alt="Search Icon" src="https://www.rjtechyg.in/wp-content/uploads/2024/10/search.png" > </button> </div> </div> </body> </html>
Without Debouncing example
जब user typing करता है, हर character input पर एक function call हो रहा है आप uper का html का इस्तमाल कर सकते है search input के लिए!.
<script> document.addEventListener("DOMContentLoaded", function(){ const inputs = document.getElementById('searchInputd'); inputs.addEventListener('input', function() { console.log('API call:', inputs.value); }); </script>
ऊपर के example में देख सकते है हर keystroke पर API call हो रही है, जो के inefficient हो सकता है, especially अगर user fast typing कर रहा हो.
With Debouncing example
<script> document.addEventListener("DOMContentLoaded", function(){ function debounce(func, delay) { let timers; return function(...args) { clearTimeout(timers); timers = setTimeout(() => { func.apply(this, args); }, delay); }; } const input = document.getElementById('searchInput'); const debouncedSearch = debounce(function() { console.log('API call:', input.value); }, 300); input.addEventListener('input', debouncedSearch); }) </script>
ऊपर के example में देख सकते है जब भी input search में कुछ typing किया जायेगा तो debouncedSearch() call किया जाता है और इसके आलावा debounce() एक wrapper function है जो हमारी original function को wrap करता है!.
func : यह हमारा Original function जो हम call करना चाहते हैं, जैसे API call.
delay : यह बताता है की function execution Kitna delay (in milliseconds) के बाद चाहिए, जैसे 300ms.
timer : यह एक variable है जो time track करेगा. जब कोई नया event trigger होगा, पुराण timer reset हो जाएगा.
clearTimeout(timer) : हर नयी event के बाद पिछले timer को cancel करता है!.
setTimeout() : एक नया timer start करता है जो specified delay के बाद func को call करता है!.
Javascript में Debouncing एक technique है जो frequent events, जैसे typing या scrolling, resizing, को optimize करने के लिए use होती है!. यह function के execution को delay करती है जब तक user कोई action temporarily stop ना करदे, ये technique performance को improve करने के लिए एसेंशियल होती है!. तो आसा करते है आप लोगो ने इस post में debouncing के concept को detail से जाना!.