vue3 多实例防抖Hook实现

const useDebounce = (delay = 300, immediate = false) => {
  const timer = ref(null);
  const isPending = ref(false);
  
  const debounce = (fn) => {
    return (...args) => {
      isPending.value = true;
      
      if (timer.value) {
        clearTimeout(timer.value);
        timer.value = null;
      }
      
      const callNow = immediate && !timer.value;
      
      if (callNow) {
        fn.apply(this, args);
        isPending.value = false;
      }
      
      timer.value = setTimeout(() => {
        if (!callNow) {
          fn.apply(this, args);
          isPending.value = false;
        }
        timer.value = null;
      }, delay);
    };
  };
  
  const cancel = () => {
    if (timer.value) {
      clearTimeout(timer.value);
      timer.value = null;
      isPending.value = false;
    }
  };
  
  return { debounce, cancel, isPending };
};


 const { debounce, cancel, isPending: pendingState } = useDebounce(delay.value, immediate.value);
  // 创建防抖函数
  const debouncedExecute = debounce(executeAction);
debouncedExecute ()