Could not make debounce to work

[fkdp06]

Hi All,

Just found your library and tried it, but it seems debounce does not work for me :-(.

Example: https://codesandbox.io/p/devbox/c2nvhp?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue

Any idea why it does not work?

[aleclarson]

Hi @fkdp06, welcome to the community.

The debounce function wraps the given function, returning a new function that applies the debouncing logic. You should call debounce outside of the event listener and pass the debounce() result as your event listener. Hope this helps.

[fkdp06]

Implemented my own debounce function instead. Could not get that one to work. Anybody can use the following approach if they also struggling with radashi:

helpers.ts:

var __next_objid = 1;
const __timers = new Map<number, NodeJS.Timeout | undefined>();

const Helpers = {
    ObjectId(obj: any): number {
        if (obj == null) return 0;
        if (obj.__obj_id == null) obj.__obj_id = __next_objid++;
        return obj.__obj_id;
    },
    Debounce(func: (...args: any[]) => any, timeout: number) {
        var objId = this.ObjectId(func);
        var timer = __timers.get(objId);
        clearTimeout(timer);
        timer = setTimeout((...args: any[]) => {
            func(...args);
        }, timeout);
        __timers.set(objId, timer);
    }
}

export default Helpers;

SearchComponent.vue:

<template>
    <input v-model="searchText" @update:modelValue="Helpers.Debounce(onSearch, 500)"/>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import Helpers from "@/helpers";

export default defineComponent({
    setup() {
        return { Helpers };
    },
    data() {
        return {
            searchText: ""
        }
    },
    methods: {
        onSearch() {
            // Do the site search
        },
    },
});
</script>

[aleclarson]

@fkdp06 You can use the Radashi debounce in your code like so:

<template>
    <input v-model="searchText" @update:modelValue="onSearch()"/>
</template>

<script lang="ts">
import { defineComponent } from "vue";
import { debounce } from "radashi";

export default defineComponent({
    data() {
        return {
            searchText: ""
        }
    },
    methods: {
        onSearch() {
            // Do the site search
        },
    },
    // Use beforeMount since you don't need debouncing in SSR context.
    beforeMount() {
        this.onSearch = debounce({ delay: 500 }, this.onSearch)
    }
});
</script>

Using radashi instead of your own implementation has the following benefits:

1. Less code for you to maintain, test, debug, etc.
2. No global state necessary (the __next_objid and __timers variables in your code)

Hope this helps!

[fkdp06]

@fkdp06 You can use the Radashi debounce in your code like so:

Thanks, it works fine now. It was tricky but I was trying several solutions before and everything wasn't working. This solution works I can confirm: https://codesandbox.io/p/devbox/c2nvhp?file=%2Fsrc%2Fcomponents%2FHelloWorld.vue%3A28%2C19 .

👍