结合react hooks封装工具

usePolling 封装

• 轮询查询

import { useRef, useCallback } from 'react';

interface ICallback {
  (): Promise<boolean>;
}

/**
 * @param {() => Promise<boolean>} callback  返回 true，继续轮询， false 则停止轮询
 * @param {number} delay  轮询间隔
 * @param {Function} result.startPolling 开始轮询
 * @param {Function} result.stopPolling 停止轮询
 */
 
function usePolling(callback: ICallback, delay: number) {
  const timer = useRef<number>();

  const stopPolling = useCallback(() => clearTimeout(timer.current), [
    callback,
    delay,
  ]);

  const startPolling = useCallback(() => {
    stopPolling();
    const tick = async () => {
      if (await callback()) {
        startPolling();
      }
    };
    timer.current = window.setTimeout(tick, delay);
  }, [callback, delay]);

  return {
    startPolling,
    stopPolling,
  };
}

export default usePolling;

debounce 封装

• 某个函数在某段时间内，无论触发了多少次回调，都只执行最后一次。

import { useRef, useCallback } from 'react';
import debounce from 'lodash.debounce';

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

/**
 * @param {(...args: any[]) => any} Fn 防抖事件
 * @param {number} ms 多少时间触发
 */

const useDebounce = <T extends Fn>(fn: T, ms: number): T => {
  const fRef = useRef<Fn>();
  fRef.current = fn;

  const result = useCallback(
    debounce((...args) => {
      fRef.current && fRef.current(...args);
    }, ms),
    [],
  );

  return result;
};

export default useDebounce;