close

Debounce em Vue.js: Controlando a Execução da Função

Debounce in Vue.js é usado para atrasar a execução de uma função por um período especificado após uma ação do usuário, como digitar, arrastar, etc. Isso é comumente usado para controlar a frequência das chamadas de função e evitar chamadas excessivas quando um usuário interage.

Aqui está um guia básico sobre como usar debounce em Vue.js:

Instale a Lodash biblioteca

Primeiro, você precisa instalar a Lodash biblioteca para usar a debounce função. Use o seguinte comando para instalar Lodash:

npm install lodash

Import E use Debounce

No seu Vue component, import a debounce função de Lodash e use-a nas situações em que debounce for necessário.

<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>

No exemplo acima, a handleSearch função será atrasada em 300 ms depois que o usuário digitar na entrada de pesquisa. Isso ajuda a evitar chamadas de API excessivas enquanto o usuário digita rapidamente.

Observe que debounce ajuda a controlar a frequência das chamadas de função, mas também pode afetar a experiência do usuário se o debounce tempo for muito alto. Considere o tempo apropriado debounce para cada caso de uso.