【react】使用定时器实现接口轮询，并且带上筛选条件---setInterval

最新推荐文章于 2024-03-09 10:50:03 发布

String佳佳

最新推荐文章于 2024-03-09 10:50:03 发布

阅读量2.1k

点赞数 1

分类专栏： react 文章标签： react.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_44171757/article/details/127571979

版权

react 专栏收录该内容

8 篇文章

订阅专栏

每隔5s刷新一次，时间默认是1小时

效果图：

在这里插入图片描述

实现代码：


let timer = null;
const ActualTime = () => {
  useEffect(() => {
    getEchartsData(); //数据查询函数，
    clearTimerFun(); //清空定时器
    setTimerFun(); //创建定时器
  }, [selectTime, selectProduct]); //监听筛选条件，一旦变化就立即重新查询，并清空已有定时器，创建新的定时器
  
  useEffect(() => {
    return () => {
      clearTimerFun(); //组件销毁时，清空定时器
    };
  }, []);
  
  const setTimerFun = () => {
    console.log("创建定时器");
    timer = setInterval(() => {
      getEchartsData();
    }, 5000);
  };
  const clearTimerFun = () => {
    console.log("清空定时器");
    clearInterval(timer);
  };
  const getEchartsData = () => {
  //这里自行编写查询逻辑
  }
}
export default ActualTime;