CODEWITHSUNDEEP
javascripttypescriptvue.jsvue-componentvuejs3
Ale
Ale

Reputation: 236

Importing a function in Vue 3 setup

Currently, im trying to call a throttle/debounce function in my Vue component, but every time it's called a Uncaught TypeError: functionTD is not a function si throw here is my code.

useThrottleDebounce.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;

and this is when it's called inside setup in my component

setup(){
   // some code
   const functionTD = useThrottleDebounce(2000, 500);
   const inc = () => {      
      functionTD (() => {     
        count.value++; // here throw error
      });
    };
}

Upvotes: 1

Views: 917

Answers (1)

Dan
Dan

Reputation: 63099

The issue is that useThrottleDebounce doesn't return a function, therefore functionTD is not a function:

export const useThrottleDebounce = (tTime = 2000, dTime = 1000) => {
  // Maybe you want some private variables / functions here
  return () => {
    // This will be `functionTD` in `setup`
  }
}

Upvotes: 1

Related Questions