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

Question

各位大佬现在有如下需求：
点击开始按钮触发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项目这边有如下报错，怎么解决

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

Answer 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]);
    };

Answer 2

点击按钮开始循环执行某一事件，点击停止时，终止该事件，可采用定时器实现该方法

let intervalInfo = null;
// 开始执行
function start (){
 // 若点击开始时，已存在定时器实例，先行取消定时器，再重新执行定时器
 if(intervalInfo){
  clearInterval(intervalInfo)
 }
 intervalInfo = setInterval(()=>{
   // 调用接口
 },1000)
}
// 结束执行
function stop () {
 clearInterval(intervalInfo)
}