useThrottleEffect

import { useEffect, useState } from 'react';
import type { DependencyList, EffectCallback } from 'react';
import type { ThrottleOptions } from '../useThrottle/throttleOptions';
import useThrottleFn from '../useThrottleFn';
import useUpdateEffect from '../useUpdateEffect';

function useThrottleEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  options?: ThrottleOptions,
) {
  const [flag, setFlag] = useState({});

  const { run } = useThrottleFn(() => {
    setFlag({});
  }, options);

  useEffect(() => {
    return run();
  }, deps);

  useUpdateEffect(effect, [flag]);
}

export default useThrottleEffect;

function useThrottleEffect(
  effect: EffectCallback,
  deps?: DependencyList,
  options?: ThrottleOptions,
) { 
  // 1. 首先，使用 useState 定义了一个 flag 状态，用于记录依赖是否更新。
  const [flag, setFlag] = useState({});

  // 2. 然后，使用 useThrottleFn 来定义一个节流函数。
  const { run } = useThrottleFn(() => {
    setFlag({});
  }, options);

  // 3. 接着，使用 useEffect 来监听依赖的更新，并调用 run 函数执行节流函数。
  useEffect(() => {
    return run();
  }, deps);

  // 4. 最后，使用 useUpdateEffect 来监听 flag 的变化，并执行 effect。
  useUpdateEffect(effect, [flag]);
}