Importing a function in Vue 3 setup

Question

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
      });
    };
}

const function = useThrottleDebounce(2000, 500); is illegal JavaScript. You can't name a constant any of the reserved words in JavaScript and function is one of them. If you need help please provide a runnable minimal reproducible example, including implementation and what you're trying to achieve. — tao
– tao, Commented Feb 11, 2021 at 23:54
That's not enough. You're not showing how you use it and you're not describing what should happen vs what currently happens. If I run the code above, I don't get the error you describe. How are you using your function? — tao
– tao, Commented Feb 11, 2021 at 23:56
@tao the function is using as is shown in the last code snippet — Ale
– Ale, Commented Feb 12, 2021 at 0:48

Dan · Accepted Answer · 2021-02-12 03:54:48Z

1

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`
  }
}

answered Feb 12, 2021 at 3:54

Dan

63.5k18 gold badges113 silver badges122 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Importing a function in Vue 3 setup

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related