useThrottle

useThrottle 是一个创建回调函数节流版本的 React Hook。它适用于限制函数的调用频率，例如在处理滚动或调整大小事件时。

接口

function useThrottle<F extends (...args: any[]) => any>(
  callback: F,
  wait: number,
  options?: { edges?: Array<'leading' | 'trailing'> }
): F & { cancel: () => void };

参数

• callbackrequired · F
  

  要被节流的函数。

• waitrequired · number
  

  将调用节流到的毫秒数。

• options{ edges?: Array<'leading' | 'trailing'> }
  

  用于控制节流行为的选项。

  • options.edgesArray<'leading' | 'trailing'> · ['leading', 'trailing']
    

    一个可选的数组，用于指定应在领先边缘、落后边缘或两者处调用该函数。

返回值

• F & { cancel: () => void }
  

  返回节流后的函数，并带有一个用于取消待执行调用的 cancel 方法。

示例

const throttledScroll = useThrottle(
  () => {
    console.log('Scroll event');
  },
  200,
  { edges: ['leading', 'trailing'] }
);

useEffect(() => {
  window.addEventListener('scroll', throttledScroll);
  return () => {
    window.removeEventListener('scroll', throttledScroll);
    throttledScroll.cancel();
  };
}, [throttledScroll]);