React hook 实现定时器(开始暂停)

136 阅读1分钟

参考别人的代码后瞎写的,不知道对不对,能跑,性能未知

import { useEffect, useState, useCallback } from 'react';

export function useInterval(callback: VoidFunction, delay: number = 1000) {
  const _callback = useCallback<VoidFunction>(callback, []);
  const [_delay, setDelay] = useState<number | null>(null);

  useEffect(() => {
    if (_delay !== null) {
      const id = setInterval(() => {
        _callback();
      }, _delay);

      return () => clearInterval(id);
    }
  }, [_delay]);

  function stop(): void {
    setDelay(null);
  }

  function start(): void {
    setDelay(delay);
  }

  return [start, stop];
}