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 ہر استعمال کے کیس کے لیے مناسب وقت پر غور کریں ۔