Javascript 如何在React中停止setInterval（）

我使用setInterval（）发送GET状态更新请求。更新过程完成后，我还使用clearInterval（）

//
//getSynProcessState用于通过在每分钟后向API发送GET请求来更新数据
//
有效期=0；
getSynProcessState=（）=>{
//获取总同步和当前同步
this.intervalID=setInterval（（）=>{
axios.get（）http://mySite/data/')
。然后（res=>{
console.log（res.data）
});
},1000);     
}

您正在覆盖

组件diddupdate

调用中的当前间隔。做检查

 if (this.state.isSyncStart) {
          this.interValID == 0 && this.getSynProcessState() //setInterval()
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        } else {
          clearInterval(this.intervalID)
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        }

---

您正在覆盖

componentdiddupdate

调用中的当前间隔。做检查

 if (this.state.isSyncStart) {
          this.interValID == 0 && this.getSynProcessState() //setInterval()
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        } else {
          clearInterval(this.intervalID)
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        }

---

我通过添加runOnce并将其设置为“If”条件，以某种方式解决了这个问题。也许它可以防止[this.intervalID]上的覆盖

runOnce=true
getSynProcessState=（）=>{
if（this.state.isSyncStart&&this.runOnce）{
this.runOnce=false
this.intervalID=setInterval（（）=>{
axios.get（）http://192.168.51.28:8031/process/')
。然后（res=>{
console.log（res.data）
//这是我的国家({
//总计：res.data.total，
//当前：res.data.current
// })
//console.log（'1:'+this.state.total）
});
},200);
}否则{
clearInterval（this.intervalID）
}
}
componentDidUpdate（）{
this.getSynProcessState（）
}

我通过添加runOnce并将其设置为“If”条件，以某种方式解决了问题。也许它可以防止[this.intervalID]上的覆盖

runOnce=true
getSynProcessState=（）=>{
if（this.state.isSyncStart&&this.runOnce）{
this.runOnce=false
this.intervalID=setInterval（（）=>{
axios.get（）http://192.168.51.28:8031/process/')
。然后（res=>{
console.log（res.data）
//这是我的国家({
//总计：res.data.total，
//当前：res.data.current
// })
//console.log（'1:'+this.state.total）
});
},200);
}否则{
clearInterval（this.intervalID）
}
}
componentDidUpdate（）{
this.getSynProcessState（）
}

setInterval返回一个id，您可以在clearInterval（id）方法stop中使用该id。它已经在code@harmandepsingkalsi中使用了，也许只需使用setTimeout？或者这可能与React规范有关。这是否回答了您的问题

getSynProcessState

触发两次，因此您正在覆盖

this.intervalID

并因此丢失它。间隔时间不要开始两次。例如，您可以检查

中是否设置了
这个.intervalID
。奇怪的是，else中的代码正在运行，这意味着clearInterval（）也在运行。但是仍然无法停止setInterval（）继续运行：| setInterval返回您一个id，您可以在clearInterval（id）方法停止中使用该id。它已经在代码@harmandepsingkalsi中执行了，也许只是使用setTimeout？或者这可能与React规范有关。这是否回答了您的问题
getSynProcessState
触发两次，因此您正在覆盖
this.intervalID
并因此丢失它。间隔时间不要开始两次。例如，您可以检查
中是否设置了
这个.intervalID
。奇怪的是，else中的代码正在运行，这意味着clearInterval（）也在运行。但仍然无法阻止setInterval（）继续运行：|这与我在评论中所说的一样，Murat Karagöz在他的回答中也提到了这一点。你使用了一个多余的标志，用额外的代码膨胀来完成同样的事情。这和我在评论中说的一样，Murat Karagöz在他的回答中也提到了这一点。您使用了一个多余的标志来通过额外的代码膨胀完成同样的事情。