【setInterval应用】倒计时 -useEffect+setInterval实现轮询

大家好，我是一枚程序鱼🐟！！！

很长没和大家更新了，很抱歉。今天给大家带来的内容：setInterval的有关的应用。

1.倒计时

 
const [countDownTime, setCountDownTime] = useState(10); // 记录倒计时时间
const timeRef = useRef(); // 用以保存定时器的值
// 清除定时器函数
  const clearTime = () => {
    if (timeRef.current) {
      clearInterval(timeRef.current);
      timeRef.current = null;
    }
  };

// 定时器函数
  const timerStart = () => {
    clearTime();
    if (countDownTime > 0) {
      timeRef.current = setInterval(() => {
        const total = countDownTime - 1;
        setCountDownTime(total);
      }, 1000);
    } else {
      clearTime();
    }
  };

useEffect(() => {
    countdownFn();
    // 离开页面时清除定时器
    return () => clearTime();
  }, [countDownTime]);

  // 进入页面时清除定时器
  useEffect(() => clearTime(), []);

2.useEffect+setInterval实现轮询

const timeRef = useRef(); // 用以保存定时器的值
// 清除定时器函数
  const clearTime = () => {
    if (timeRef?.current) {
      clearInterval(timeRef.current);
      timeRef.current = null;
    }
  };

  // 定时器函数
  const timerStart = () => {
    clearTime();
    // 这是只是判断条件无需关系我的逻辑，只需要替换成定时器开启的条件即可。
    if (status === 1) {
      timeRef.current = setInterval(() => {
        // 调用接口
        getData({ id });
      }, 5000);
    } else {
      clearTime();
    }
  };

  useEffect(() => {
    timerStart();
// 离开页面时清除定时器
    return () => clearTime();
  }, [getData, id, status]);

  // 进入页面时清除定时器
  useEffect(() => clearTime(), []);

特别注意的是：只要使用了setInterval，就要时刻关注它需要关闭的时机。比如，离开的页面的时候，路由改变的时候等。

其实，上面的useRef也可以用useState代替。但是从规范上来讲：useRef常常用来保存常量，而useState用来保存变量。