At the moment, I am attempting to utilize a throttle/debounce function within my Vue component. However, each time it is invoked, an error of
Uncaught TypeError: functionTD is not a functionuseThrottleDebounce.ts
import { debounce, throttle } from "lodash";
import { ref, watch } from "vue";
export const useThrottleDebounce = (tTime = 2000, dTime = 1000) => {
const tRef = ref<any>(null);
const tFunc = ref<any>(null);
const tDHook = ref<any>(null);
const debounceThrottle = debounce(() => {
if (tRef.value) {
tRef.value.cancel();
}
tRef.value = throttle(tFunc.value, tTime)();
}, dTime);
const throttleDebounceCreator = () => {
return (func: any) => {
tFunc.value = func;
debounceThrottle();
};
};
watch(() => tDHook.value, () => {
tDHook.value = throttleDebounceCreator();
});
return tDHook;
};
export default useThrottleDebounce;
The issue arises when this function is called within the setup section of my component:
setup(){
// some code
const functionTD = useThrottleDebounce(2000, 500);
const inc = () => {
functionTD (() => {
count.value++; // an error occurs at this point
});
};
}