close

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 उशीर होईल. हे वापरकर्ता पटकन टाइप करत असताना जास्त API कॉल करणे टाळण्यास मदत करते.

लक्षात ठेवा की फंक्शन कॉलची वारंवारता नियंत्रित करण्यात मदत होते, परंतु वेळ खूप जास्त सेट केल्यास debounce त्याचा वापरकर्त्याच्या अनुभवावर देखील परिणाम होऊ शकतो. प्रत्येक वापराच्या केससाठी debounce योग्य वेळ विचारात घ्या. debounce