Debounce में Vue.js: फ़ंक्शन निष्पादन को नियंत्रित करना

Debounce in का Vue.js उपयोग उपयोगकर्ता की कार्रवाई, जैसे टाइपिंग, ड्रैगिंग आदि के बाद एक निर्दिष्ट अवधि के लिए फ़ंक्शन के निष्पादन में देरी करने के लिए किया जाता है। इसका उपयोग आमतौर पर फ़ंक्शन कॉल की आवृत्ति को नियंत्रित करने और उपयोगकर्ता द्वारा इंटरैक्ट करने पर अत्यधिक कॉल को रोकने के लिए किया जाता है।

debounce यहां उपयोग करने के तरीके पर एक बुनियादी मार्गदर्शिका दी गई है Vue.js:

Lodash लाइब्रेरी स्थापित करें

सबसे पहले, आपको फ़ंक्शन Lodash का उपयोग करने के लिए लाइब्रेरी स्थापित करने की आवश्यकता है। debounce इंस्टॉल करने के लिए निम्न कमांड का उपयोग करें Lodash:

npm install lodash

Import और उपयोग करें Debounce

आपके में Vue component, import फ़ंक्शन debounce से Lodash और उन स्थितियों में इसका उपयोग करें जहां debounce आवश्यकता हो।

<template>  
  <div>  
    <input type="text" v-model="searchTerm" @input="handleSearch" />  
    <div>{{ searchResult }}</div>  
  </div>  
</template>  
  
<script>  
import _ from 'lodash';  
  
export default {  
  data() {  
    return {  
      searchTerm: '',  
      searchResult: ''  
    };  
  },  
  methods: {  
    handleSearch: _.debounce(function() {  
      // Handle search here, for example:  
      // Call search API and update searchResult  
      this.searchResult = 'Search Result: ' + this.searchTerm;  
    }, 300) // Debounce time(300ms)  
  }  
};  
</script>  

उपरोक्त उदाहरण में, handleSearch उपयोगकर्ता द्वारा खोज इनपुट टाइप करने के बाद फ़ंक्शन में 300ms की देरी होगी। इससे उपयोगकर्ता को तेज़ी से टाइप करते समय अत्यधिक एपीआई कॉल करने से बचने में मदद मिलती है।

ध्यान दें कि यह फ़ंक्शन कॉल की आवृत्ति को नियंत्रित करने में मदद करता है, लेकिन यदि समय बहुत अधिक सेट किया गया है तो debounce यह उपयोगकर्ता अनुभव को भी प्रभावित कर सकता है। प्रत्येक उपयोग के मामले के लिए debounce उपयुक्त समय पर विचार करें । debounce