【js】定时器轮询

setInterval的问题如果请求超时超过轮询间隔会导致请求堆积所以用setTimeOut递归确保上一次请求完成再等待间隔发起下一次请求import{useState,useEffect,useRef}fromreact;import{message}fromantd;import{getMeteringList}from/services/MeterDataQuery;constAdvancedPollingDemo(){const[data,setData]useState([]);const[loading,setLoading]useState(false);consttimerRefuseRefNodeJS.Timeout|null(null);constPOLLING_INTERVAL5000;// 递归轮询函数constpollingasync(){if(loading)return;setLoading(true);try{constresawaitgetMeteringList({pageSize:15,pageNum:1});if(res.code200){setData(res.rows||[]);}}catch(error){console.error(轮询失败:,error);}finally{setLoading(false);// 上一次请求完成后再设置下一次定时器timerRef.currentsetTimeout((){polling();},POLLING_INTERVAL);}};// 启动轮询conststartPolling(){if(!timerRef.current){polling();// 立即执行第一次}};// 停止轮询conststopPolling(){if(timerRef.current){clearTimeout(timerRef.current);timerRef.currentnull;}};// 组件卸载清理useEffect((){startPolling();return(){stopPolling();};},[]);return(divdiv递归轮询示例-当前数据{data.length}条/div/div);};exportdefaultAdvancedPollingDemo;