Wait x seconds for new emitted value before triggering a function-CodePudding

I have a child component that emits a value, and in the parent I perform an axios call with this value each time it is emitted. My problem is that I want to trigger the axios call only if in x ms (or seconds) the child has not emmited another value in order to reduce the amount of calls I do.

Code here :

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

Thanks in advance.

CodePudding user response：

What you need is debouncing. Here is an example:

var timeout, delay = 3000;

function func1() {
  clearTimeout(timeout);
  timeout = setTimeout(function(){
    alert("3000 ms inactivity");
  }, delay);
}

<input type="text" oninput="func1()">

When emitted, simply call func1(), and if there are no new emissions after 3000 ms, the function in timeout will be executed.

CodePudding user response：

It would be better to understand the problem and use case if you add the code also. but As I could understand the problem these is two way

if you using inside input and triggering based @changed event you can add @change.lazy this not trigger on each change.
second solution is to use setTimeout(function,delayInMs) inside parent

vuejs Docs link

CodePudding user response：

By simply changing the handleFilters function to :

handleFilters(filters) {
   clearTimeout(this.timeout);
   this.timeout = setTimeout(
      this.getGamerTags,
      this.delay,
      filters.find(o => o.field == "playerGamerTag").filter
   );
},

the problem is solved.