React+Hook+ts+antDesign实现伪定时调用接口功能

前言

大家好 我是歌谣 微信公众号关注前端小歌谣 今天要做的需求是接口 在一定时间里面执行一次的功能

定义循环时长

说一下整体实现思路吧 定义定时器执行时间的状态 这里是十秒 可以通过接口配置调用

const [delay, setDelay] = useState(10000)

定义分页

const [pageIndex, setPageIndex] = useState(0)

核心代码实现

分页变化调用接口

const timer = setInterval(() => {
      if (pageIndex == total) {

        setPageIndex(0)
        // setVisable(visable++)


      } else {
        setPageIndex(pageIndex + 1)
      }
    }, delay)
    return () => clearInterval(timer)
    // }else{
    //   const time1 = setInterval(() => {
    //     initMenuList()
    //   }, delay)
    //   return () => clearInterval(time1)
    // }

  }, [pageIndex, total])

useEffect(() => {
    initMenuList();
  }, [pageIndex]);

const initMenuList = async () => {
    const response = await postScreenList({ pageIndex: pageIndex, pageSize: 1, bedCodeList: ["CC001"] });
    console.log(response, "response");

    if (response.code == 200) {
      setMenuList(response.data);
      setTotal(response.total)
      // setPages(response.pages)
      // setCurrent(response.current)
    }
  };

备注

接口中的数据返回的response.total当数据未空时候 返回为1 其他正常返回 这样就能实现定时器的永动了

总结

我是歌谣 放弃很容易 但是坚持一定很酷