useDebounceFn

使用React hooks防抖（debounce）函數

useDebounceFn 建立一個防抖版本的函式，在指定的延遲時間內如果再次呼叫，會重置計時器。只有在最後一次呼叫後經過指定延遲才會執行。它回傳防抖後的函式和一個取消函式。

使用場景

• 對搜尋輸入進行防抖處理，避免每次按鍵都發送 API 請求
• 延遲表單驗證直到使用者停止輸入
• 節制視窗調整大小或捲動時的回呼執行

注意事項

• 最新參數：防抖函式總是使用最後一次呼叫時傳入的參數執行。
• 取消：回傳的 cancel 函式可用於取消待處理的呼叫。
• 相關 hooks：另請參閱 useDebounce 用於值的防抖，以及 useThrottleFn 用於限制函式執行頻率。

Usage

function Demo() {
  const [value, setValue] = useState(0);
  const { run } = useDebounceFn(() => {
    setValue(value + 1);
  }, 500);

  return (
    <div>
      <p style={{ marginTop: 16 }}> 點擊次數：{value} </p>
      <button type="button" onClick={run}>
        快速點擊！
      </button>
    </div>
  );
};

API

useDebounceFn

Returns

{ run: _.DebouncedFunc<(...args_0: Parameters<T>) => ReturnType<T>>; cancel: () => void; flush: any; }: 具有以下元素的對象:

• run：執行函數。
• cancel：取消執行函數。
• flush: 立即執行函數

Arguments