18910140161

点击开始按钮每秒调用一次接口,点击结束按钮停止调用接口怎么实现

顺晟科技

2021-07-09 11:25:17

196

各位大佬现在有如下需求:点击开始按钮触发protoChange函数,每秒调用一次getProtocolsRequest接口拉取数据 ,点击关闭按钮触发stopChange函数停止调用getProtocolsRequest函数。具体要怎么写啊?求解!!!先在此谢过了。

    const stopChange = () => {
        setIsButton(false);
        // 停止获取协议信息
        getProtocolsRequest.cancel(history.location.pathname.split('flows/')[1]);
    };
    
    const protoChange = () => {
        // 每秒获取一次某个客户端的协议信息
        setIsButton(true);
        getProtocolsRequest.run(history.location.pathname.split('flows/')[1], startTime).then(result => {
            setProtocolsInfo([]);
            setProtocolsInfo(result.protocols);
            protoChange();
        });
    };

因为是TS项目这边有如下报错,怎么解决image.png

    let intervalInfo: NodeJS.Timeout | null = null;

    const protoChange = () => {
        setIsButton(true);
        if (intervalInfo) {
            clearInterval(intervalInfo);
        }
        intervalInfo = setInterval(() => {
            // 每秒获取一次某个客户端的协议信息
            getProtocolsRequest.run(history.location.pathname.split('flows/')[1], startTime).then(result => {
                console.log(result.protocols);
                setProtocolsInfo([]);
                setProtocolsInfo(result.protocols);
            });
        }, 1000);
        
    };

    const stopChange = () => {
        clearInterval(intervalInfo);
        setIsButton(false);
        // 停止获取协议信息
        getProtocolsRequest.cancel(history.location.pathname.split('flows/')[1]);
    };

直接用ahooks里面的useInterval就解决了,非常方便,想了解更多的朋友可以去官方文档深入了解

//初始值timeInterval为1s调用一次 
const [timeInterval, setTimeInterval] = useState(1000);
useInterval(() => {
        if (timeInterval !== 0) {
            getProtocolsRequest.run(history.location.pathname.split('flows/')[1], startTime).then(result => {
                setProtocolsInfo([]);
                setProtocolsInfo(result.protocols);
            });
        }
    }, timeInterval);
//点击开始将timeInterval赋值为1s
const protoChange = () => {
        setIsButton(true);
        setTimeInterval(1000);
    };
//点击关闭将timeInterval重置为0s
const stopChange = () => {
        setIsButton(false);
        setTimeInterval(0);
        // 停止获取协议信息
        getProtocolsRequest.cancel(history.location.pathname.split('flows/')[1]);
    };
点击按钮开始循环执行某一事件,点击停止时,终止该事件,可采用定时器实现该方法
let intervalInfo = null;
// 开始执行
function start (){
 // 若点击开始时,已存在定时器实例,先行取消定时器,再重新执行定时器
 if(intervalInfo){
  clearInterval(intervalInfo)
 }
 intervalInfo = setInterval(()=>{
   // 调用接口
 },1000)
}
// 结束执行
function stop () {
 clearInterval(intervalInfo)
}
相关文章
我们已经准备好了,你呢?
2024我们与您携手共赢,为您的企业形象保驾护航