useDebounceFn

import { debounce } from '../utils/lodash-polyfill';
import { useMemo } from 'react';
import type { DebounceOptions } from '../useDebounce/debounceOptions';
import useLatest from '../useLatest';
import useUnmount from '../useUnmount';
import { isFunction } from '../utils';
import isDev from '../utils/isDev';

type noop = (...args: any[]) => any;

function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {
  if (isDev) {
    if (!isFunction(fn)) {
      console.error(`useDebounceFn expected parameter is a function, got ${typeof fn}`);
    }
  }

  const fnRef = useLatest(fn);

  const wait = options?.wait ?? 1000;

  const debounced = useMemo(
    () =>
      debounce(
        (...args: Parameters<T>): ReturnType<T> => {
          return fnRef.current(...args);
        },
        wait,
        options,
      ),
    [],
  );

  useUnmount(() => {
    debounced.cancel();
  });

  return {
    run: debounced,
    cancel: debounced.cancel,
    flush: debounced.flush,
  };
}

export default useDebounceFn;

function useDebounceFn<T extends noop>(fn: T, options?: DebounceOptions) {
  // 1. 首先，使用 useLatest 来记录函数的最新值。
  const fnRef = useLatest(fn);

  // 2. 然后，使用 options 中的 wait 属性来设置防抖时间，默认值为 1000ms。
  const wait = options?.wait ?? 1000;

  // 3. 接着，使用 useMemo 来缓存防抖后的函数。防抖后的函数内部会调用 fnRef 对象的值，并返回函数的执行结果。
  const debounced = useMemo(
    () =>
      // 使用 lodash 的 debounce 函数实现防抖函数，参数配置也完全与 lodash 的 debounce 函数一致。
      debounce(
        (...args: Parameters<T>): ReturnType<T> => {
          return fnRef.current(...args);
        },
        wait,
        options,
      ),
    [],
  );

  // 4. 然后，使用 useUnmount 来卸载防抖后的函数。
  useUnmount(() => {
    debounced.cancel();
  });

  // 5. 最后，返回防抖后的函数，包括 run、cancel、flush 三个方法。
  return {
    run: debounced,
    cancel: debounced.cancel,
    flush: debounced.flush,
  };
}