जावास्क्रिप्ट का उपयोग करते समय, अत्यधिक ईवेंट ट्रिगर आपके एप्लिकेशन को धीमा कर सकते हैं। उदाहरण के लिए, किसी उपयोगकर्ता द्वारा ब्राउज़र विंडो का आकार बदलने या खोज बार में टाइप करने से कम समय में बार-बार इवेंट सक्रिय हो सकते हैं, जिससे ऐप का प्रदर्शन प्रभावित हो सकता है।

यह वह जगह है जहां थ्रॉटलिंग और डिबाउंसिंग बचाव के लिए आते हैं। वे आपको यह प्रबंधित करने में मदद करते हैं कि बार-बार सक्रिय होने वाली घटनाओं से निपटने के दौरान आपके कार्यों को कितनी बार बुलाया जाता है।

? थ्रॉटलिंग क्या है?

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

उदाहरण:

कल्पना करें कि आप एक संगीत कार्यक्रम में हैं, और तस्वीरें ले रहे हैं। लेकिन आप हर 5 मिनट में केवल एक तस्वीर लेने का निर्णय लेते हैं (चाहे प्रदर्शन कितना भी रोमांचक क्यों न हो)। यह गला घोंटने जैसा है. चाहे कितने भी फोटो-योग्य क्षण क्यों न हों, आप हर 5 मिनट में एक फोटो के अपने नियम पर कायम रहेंगे।

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

कोड उदाहरण:

function handleScroll() {
  console.log("Scrolled!");
}

window.addEventListener('scroll', throttle(handleScroll, 2000));

function throttle(func, limit) {
  let lastCall = 0;
  return function() {
    const now = new Date().getTime();
    if (now - lastCall >= limit) {
      lastCall = now;
      func();
    }
  };
}

इस उदाहरण में, हैंडलस्क्रॉल फ़ंक्शन हर 2 सेकंड (2000 मिलीसेकंड) में केवल एक बार चलेगा, चाहे उपयोगकर्ता कितनी भी तेजी से या बार-बार स्क्रॉल करे।

? डिबाउंसिंग क्या है?

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

उदाहरण:

कल्पना करें कि आप एक समूह चैट में हैं, और आप एक संदेश टाइप कर रहे हैं। हर बार जब आप कोई कुंजी दबाते हैं तो आप अपने मित्रों को सूचना नहीं भेजना चाहते। इसके बजाय, आप "टाइपिंग..." अधिसूचना भेजने से पहले कुछ सेकंड के लिए टाइप करना बंद करने तक प्रतीक्षा करना चाहते हैं। यह विवादास्पद है - टाइपिंग में विराम के बाद केवल एक अधिसूचना भेजना।

जावास्क्रिप्ट में, डिबाउंसिंग का उपयोग अक्सर तब किया जाता है जब उपयोगकर्ता किसी खोज बॉक्स में टाइप करते हैं। प्रत्येक कीस्ट्रोक के बाद एक खोज क्वेरी भेजने के बजाय, आप तब तक प्रतीक्षा कर सकते हैं जब तक उपयोगकर्ता खोज करने से पहले एक पल के लिए टाइप करना बंद न कर दे।

कोड उदाहरण:

function handleInput() {
  console.log("User stopped typing!");
}

const inputField = document.querySelector('input');
inputField.addEventListener('input', debounce(handleInput, 500));

function debounce(func, delay) {
  let timeout;
  return function() {
    clearTimeout(timeout);
    timeout = setTimeout(func, delay);
  };
}

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

? थ्रॉटलिंग या डिबाउंसिंग का उपयोग कब करें?

⚡️ जब आप यह नियंत्रित करना चाहते हैं कि किसी फ़ंक्शन को समय के साथ कितनी बार कॉल किया जाए तो थ्रॉटलिंग का उपयोग करें। ऐसे आयोजनों के लिए अच्छा है:

=> स्क्रॉलिंग
=> विंडो का आकार बदलना
=> माउस चाल

⚡️ डिबाउंसिंग का उपयोग करें जब आप यह सुनिश्चित करना चाहते हैं कि किसी इवेंट को फायरिंग समाप्त होने के बाद ही कोई फ़ंक्शन कॉल किया जाता है। ऐसे आयोजनों के लिए अच्छा है:

=> खोज बार में टाइप करना
=> फॉर्म सबमिशन
=> विंडो का आकार बदलना (लेआउट समायोजन जैसी क्रियाओं के लिए)

निष्कर्ष ✅

आपके जावास्क्रिप्ट अनुप्रयोगों के प्रदर्शन और प्रतिक्रियाशीलता को बेहतर बनाने के लिए थ्रॉटलिंग और डिबाउंसिंग बेहतरीन तकनीकें हैं।

वे आपको यह प्रबंधित करने में मदद करते हैं कि फ़ंक्शन कितनी बार निष्पादित किए जाते हैं, जिससे आपके ऐप को बहुत अधिक घटनाओं से अभिभूत होने से बचाया जा सकता है।

यह समझकर कि उनका उपयोग कब और कैसे करना है, आप व्यस्ततम ऐप्स में भी अपना कोड सुचारू रूप से चालू रख सकते हैं!

हैप्पी कोडिंग! ?