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 ਹਰੇਕ ਵਰਤੋਂ ਦੇ ਕੇਸ ਲਈ ਢੁਕਵੇਂ ਸਮੇਂ 'ਤੇ ਵਿਚਾਰ ਕਰੋ ।