vue3 多實(shí)例防抖Hook實(shí)現(xiàn)

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);
  // 創(chuàng)建防抖函數(shù)
  const debouncedExecute = debounce(executeAction);
debouncedExecute ()
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡書系信息發(fā)布平臺,僅提供信息存儲服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容