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 દરેક ઉપયોગના કેસ માટે યોગ્ય સમયનો વિચાર કરો .