Tengo un componente hijo que emite un valor, y en el padre realizo una llamada axios con este valor cada vez que se emite. Mi problema es que quiero activar la llamada axios solo si en x ms (o segundos) el niño no ha emitido otro valor para reducir la cantidad de llamadas que hago.
Código aquí:
<script> import axios from "axios"; import DataTable from './DataTable.vue'; export default { name: 'Test', data() { return { gamertags: [], // Utils timeout: 500, delay: 500 } }, methods: { // API calls async getGamerTags(string='') { const path = `http://localhost:5000/gamertags?string=${string}` await axios.get(path) .then((res) => { this.gamertags = res.data; }) .catch((error) => { console.error(error); }); }, // DataTable handleFilters(filters) { clearTimeout(this.timeout); this.timeout = setTimeout(this.getGamerTags(filters.find(o => o.field == "playerGamerTag").filter), this.delay); } } components: { DataTable } }; </script> <template> <DataTable @filters="handleFilters" /> </template>Gracias por adelantado.
Lo que necesitas es antirrebote . Aquí hay un ejemplo:
var timeout, delay = 3000; function func1() { clearTimeout(timeout); timeout = setTimeout(function(){ alert("3000 ms inactivity"); }, delay); } <input type="text" oninput="func1()"> Cuando se emita, simplemente llame a func1() , y si no hay nuevas emisiones después de 3000 ms, se ejecutará la función en tiempo de espera.
Sería mejor comprender el problema y el caso de uso si también agrega el código. pero como pude entender el problema, estos son de dos vías
@changed basado, puede agregar @change.lazy esto no se activará en cada cambio.setTimeout(function,delayInMs) dentro del padreSimplemente cambiando la función handleFilters a:
handleFilters(filters) { clearTimeout(this.timeout); this.timeout = setTimeout( this.getGamerTags, this.delay, filters.find(o => o.field == "playerGamerTag").filter ); },el problema esta resuelto.