如何在 React 中停止 setInterval()

Posted 2023-02-19

【中文标题】如何在 React 中停止 setInterval()

【英文标题】：How to stop setInterval() in React

【发布时间】：2020-10-19 17:44:08

【问题描述】：

我使用 setInterval() 发送 GET 请求以更新状态。更新过程完成后，我也会使用 clearInterval()。

//
// getSynProcessState used for updating data by sending GET request to an API after every minute
//
     
      intervalID = 0;

      getSynProcessState = () =>  
          // get total and current sync
          this.intervalID = setInterval(() =>  
            axios.get('http://mySite/data/')
            .then(res => 
              console.log(res.data)
            );
          ,1000);     
      

//
// clearInterval() will run if this.state.isSyncStart === false
//
    componentDidUpdate() 
        
        if (this.state.isSyncStart) 
          this.getSynProcessState() //setInterval()
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
         else 
          clearInterval(this.intervalID)
          console.log('componentDidUpdate: ' + this.state.isSyncStart)
        

      
     

如您所见，当 [this.state.isSyncStart === true] => setInterval() 运行正常时 但是当 [this.state.isSyncStart === false] => clearInterval() 运行但 GET 请求继续发送时

【问题讨论】：

setInterval 返回一个 id，你可以在 clearInterval(id) 方法中使用该 id 停止它

他已经在代码@HarmandeepSinghKalsi 中这样做了，也许只是使用 setTimeout？或者这可能与 React 规范有关。

这能回答你的问题吗？ Stop setInterval call in javascript

getSynProcessState 触发两次，因此您将覆盖 this.intervalID 并因此丢失它。不要开始两次间隔。例如，您可以检查this.intervalID 是否设置在getSynProcessState 中。

奇怪的是 else 里面的代码正在运行，这意味着 clearInterval() 也在运行。但仍然无法停止 setInterval() 继续运行：|

【参考方案1】：

我通过添加 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/')
        .then(res => 
          console.log(res.data)
          // this.setState(
          //   total: res.data.total,
          //   current: res.data.current
          // )
          // console.log('1: ' +this.state.total)
        );
      ,200);
     else 
      clearInterval(this.intervalID)
    
  

  componentDidUpdate() 
    this.getSynProcessState()
  

【讨论】：

这与我在评论中所说的相同，Murat Karagöz 在他的回答中发布。你使用了一个多余的标志来完成同样的事情，但代码也很臃肿。

【参考方案2】：

您正在覆盖componentDidUpdate 调用中的当前间隔。做一个检查，例如

 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)