在react native中,使用es6语法怎么清除定时器?

发布于 2022-09-04 00:02:48 字数 1069 浏览 36 评论 0

我想做一个类似倒计时的效果,当倒计时为0的时候,计时器停止,但是目前不知道怎么做,求大神解答,谢谢!新手求助!
目前有如下代码:

const totalCount = 10;
class Register extends Component {
    ...
     // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            count: totalCount
        };
        this.componentWillUnMount = this.componentWillUnMount.bind(this);
    }

    componentWillUnMount() {
        clearInterval(this.timer);//FIXME:无法实现卸载时清除计时器
    }
    
    count() {
        this.timer = setInterval(()=>this.setState({
                count: this.state.count - 1
            }
        ), 1000);
        if (this.state.count == 0) {
            //clearTimeout(this.timer)//FIXME:确定程序可以走到这里,但是无法实现清除计时器
            clearInterval(this.timer);
        }
    }
    
    render() {
        return(
             ...
             <TouchableOpacity onPress={this.count.bind(this)} disabled={!(this.state.count == totalCount || this.state.count == 0)}>
                            ...
             </TouchableOpacity>
        )
    }
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

酒浓于脸红 2022-09-11 00:02:48

现在问题已解决:
1、componentWillUnMount() ---> componentWillUnmount()
ps:Unmount的m为小写!

2、和楼上回答一致:

count() {
        this.timer = setInterval(()=> {
            this.setState({
                count: this.state.count - 1
            });
            if (this.state.count == 0) {
                clearInterval(this.timer);
            }
        }, 1000);
    }
梦太阳 2022-09-11 00:02:48

把这一句 if (this.state.count == 0) {

        clearInterval(this.timer);
    }
    
   放在定时执行函数体内
~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文