Question

这是在这里搜索时被问到的，但是解决方案没有用，或者我错过了什么。这是代码的片段

tick(rev_new_arr) {
    if(rev_new_arr.length > 0){
        this.setState({
            sim_play_date : rev_new_arr[0]
        },()=>{
            rev_new_arr.shift()
        })
    }else{
        this.stopPlay()
    }
  }
playMap(){
        const startDate = this.state.simulation_date;
        const sim_dates = this.state.sim_dates;
        const index_simdate = parseInt(sim_dates.indexOf(startDate) + 1, 0);
        const new_arr = sim_dates.slice(0,index_simdate);
        const rev_new_arr = new_arr.reverse();
        this.timerID  = setInterval(()=> this.tick(rev_new_arr), 1000);     
}

stopPlay(){
    console.log(this.timerID);
    clearInterval(this.timerID);
}

setInterval有效，但在按钮上点击事件添加功能stopPlay()时，它不会停止并仍然调用tick功能。

编辑：我尝试在控制台中记录timerID。它输出2个ID。我认为这就是原因，为什么它甚至不停止调用clearInterval。这是什么原因？

Answer 1

您的方法playMap() stopPlay()和tick()是否与该类绑定？如果没有，请尝试将它们定义为：

stopPlay = () => {
   ...
}

Answer 2

clearInterval指的是全局上下文，所以绑定它。

stopPlay(){
    console.log(this.timerID);
    clearInterval(this.timerID).bind(this);
}

ReactJS中的SetInterval和clearInterval

2 个答案: