vtils/react/useInterval.js

一个面向业务的 JavaScript/TypeScript 实用程序库。

import { useCallback, useEffect, useRef, useState } from 'react';
import { useLatest } from 'react-use';
/**
 * 以一定的间隔时间重复调用某函数，并返回调用结果。
 *
 * @param callback 回调函数
 * @param delay 间隔时间（毫秒），非数字时将不调用或停止调用函数
 * @param duration 持续时间（毫秒）
 * @returns 返回调用结果
 */
export function useInterval(callback, delay, duration) {
  var _useState = useState(),
    result = _useState[0],
    setResult = _useState[1];
  var latestCallback = useLatest(callback);
  var latestDelay = useLatest(delay);
  var latestDuration = useLatest(duration);
  var interval = useRef();
  var stop = useCallback(function () {
    if (interval.current) {
      clearInterval(interval.current);
    }
  }, []);
  var start = useCallback(function (delay, duration) {
    var _delay, _duration;
    stop();
    delay = (_delay = delay) != null ? _delay : latestDelay.current;
    duration = (_duration = duration) != null ? _duration : latestDuration.current;
    if (typeof delay === 'number') {
      setResult(latestCallback.current());
      interval.current = setInterval(function () {
        setResult(latestCallback.current());
      }, delay);
    }
    if (typeof duration === 'number') {
      setTimeout(function () {
        stop();
      }, duration);
    }
  }, []);
  useEffect(function () {
    start();
    return stop;
  }, [delay]);
  return [result, {
    start: start,
    stop: stop
  }];
}