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

本文链接：https://blog.csdn.net/qq_41632427/article/details/130723380

前言

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

定义循环时长

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

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)
}

}; ```