首页 > 技术文章 > react 循环产生定时器

xiaoyaoweb 2018-07-20 10:17 原文

var maxShowSeconds=3600000
            _self.state.totalSeconds.forEach((item,index)=>{
                var timer='timer'+index
                _self.state.timer.push(timer)
                _self.setState({
                    timer:_self.state.timer
                })
               
            })
            _self.state.totalSeconds.forEach((item,index)=>{
                _self.state.timer[index] = setInterval(() => {
                    var newSeconds=_self.state.totalSeconds.slice()
                    var showTotalSeconds=_self.state.showTotalSeconds.slice()
                    newSeconds[index]=newSeconds[index]-1
                    if(newSeconds[index]>=maxShowSeconds){
                        showTotalSeconds[index]=maxShowSeconds-1
                    }else{
                        showTotalSeconds[index]=showTotalSeconds[index]-1
                    }
                    _self.setState({
                        totalSeconds:newSeconds,
                        showTotalSeconds:showTotalSeconds,
                    }, () => {
                        if (_self.state.totalSeconds[index] == 0) {
                            clearInterval(_self.timer);
                        }
                    });
                }, 1000)
            })
View Code

组件解绑之后清除定时器
componentWillUnmount(){
        var _self=this;
        _self.state.timer.forEach((item,index)=>{
            clearInterval(_self.state.timer[index])
        })
    }
View Code

 

  

推荐阅读