Debounce delays but doesn't debounce

[readyonelabs]

Version: Vue 3, debounce v3.0.1
Browser: Chrome

I'm attempting to use this package to debounce a method that runs when the @input event of a textarea is fired. Because of my setup, I'm just using debounce directly. I have the debounce module imported, and I wrap the function to debounce inside of a watcher. The result is that when the @input event is fired multiple times in rapid succession, my method call is delayed for the amount of time specified, but then runs for each event that was triggered. I expected it to only run once since the event was fired multiple times within the wait period.

My code is like this:

<Textarea id="content" @input="contentChanged" v-model="form.content" />

import { debounce } from 'vue-debounce';
export default {
    setup (props) {
        const form = useForm({
            content: null
        });
        return form;
    },
    data() {
        changes: 0
    },
    methods: {
          contentChanged(e) {
            this.changes++;
        },
        performAction(val) {
            console.log(val);
        }
    },
    watch: {
        changes: function(val) {
            let newContent = this.form.content;
            debounce(val => {
                this.performAction(val);
            }, 3000)(newContent);
        }
    }
}

When I type the word "test" into the textarea, 3 seconds go by, then the following is printed to the console:
t
te
tes
test

How do I make debounce... debounce? Thanks for the help.

[dhershman1]

It might be because of the watch here, try using it in your methods instead, since watch records and keeps track of every change instead of just calling the function.

If that's not the case it may be something I need to look into 🤔

[readyonelabs]

Thanks for the reply. I've attempted to do the same thing in various ways, all with the same results. Even when using debounce directly in the method with no watch involved, the calls are delayed but not debounced. For example:

import { debounce } from 'vue-debounce';
export default {
    setup (props) {
        const form = useForm({
            content: null
        });
        return form;
    },
    methods: {
        contentChanged(e) {
            let newContent = this.form.content;
            debounce(val => this.performAction(val), 1000)(newContent);
        },
        performAction(val) {
            console.log(val);
        }
    }
}

[spingary]

@readyonelabs it's because debounce() returns a function which you need to use again, something like this:

import { debounce } from 'vue-debounce';
export default {
    setup (props) {
        const form = useForm({
            content: null
        });
        const debounceFn = debounce(val => this.performAction(val),'400ms')
        return form;
    },
    methods: {
        contentChanged(e) {
            let newContent = this.form.content;
            this.debounceFn(newContent);            
        },
        performAction(val) {
            console.log(val);
        }
    }
}

@dhershman1 I think maybe you should remove the part about "just double call the function" in the docs.

[dhershman1]

Oh yeah, I guess I overlooked that in your first example. Sorry been a weird week.

[readyonelabs]

I did read that part in the docs, and attempted to "double call" the returned method like so:

debounce(val => this.performAction(val), 3000)(newContent)

I'm still not sure why that didn't work, but I'll switch the setting up the function before hand and give that a try. Thanks for the assistance. Cheers and happy new year!

[dhershman1]

I'm honestly not sure why that didn't want to work either. If it becomes a problem maybe I should re open this and diagnose it further than just tweaking the readme...

[spingary]

I think it's because debounce() returns a function, so each time you call it, it returns a new function as opposed to calling the same instance of the function again (which is what we need).

[dhershman1]

Ohhhh, I see what you're saying now. Yeah that def probably shouldn't be happening, I guess I should instance it instead of wrapping it. That would make more sense.

Note to me on reopening:

We need to fix how debounce reacts when being called multiple times, instead of returning a fresh instance each time, we should return the old instance if possible so we don't keep delaying on calls but properly keep track of the debounce.

[thatONEjustin]

This issue is still persists.

    <!-- GMapMap is a vuejs google maps component --> 
    <GMapMap
        @bounds_changed="fetchMarkers" 
        />
    <!-- @bounds_changed is a google maps event fired when user pans map --> 

updateBounds(event) {
    if(event != undefined) {
        // console.log(event)
        debounce(() => {
            console.count('number of times updateBounds debounced:')
        }, 5000)();
    }
},

expected behavior to fire the console.count once after 5 seconds. Instead it iterates n times after 5 seconds, where n is a google maps "bounds_changed" event that is firing when a user pans a map.