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 其他正常返回 这样就能实现定时器的永动了

总结

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