Skip to content

Wait x seconds for new emitted value before triggering a function

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 :

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 =;
                .catch((error) => {

        // DataTable
        handleFilters(filters) {
            this.timeout = setTimeout(this.getGamerTags(filters.find(o => o.field == "playerGamerTag").filter), this.delay);
    components: {


Thanks in advance.


What you need is debouncing. Here is an example:

var timeout, delay = 3000;

function func1() {
  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.