Javascript 如果满足条件，是否可以清除设置间隔？不使用componentDidMount？

我正在创建一个简单的计时器。我希望计时器在每次达到00秒时重置。我正在使用setInterval，但在this.state.seconds中，它不是每次清除值为0。我见过一些使用componentDidMount和componentDidUnmount的解决方案，但我有兴趣从调用setInterval本身的方法中执行并清除setInterval。这有可能吗

直到现在，计时器即使在0秒后也会继续减少。这是我的代码笔草稿：

---

handlePlay

在单击按钮时启动计时器，但不会像您预期的那样检查剩余的计时器

这是因为提供给

setInterval

的函数是

console.log(this.state.seconds)
this.setState({
  seconds: this.state.seconds - 1
})

而不是功能

handlePlay

为了更好的可读性和可维护性（同时也让代码工作），将处理时间减少的逻辑与启动计时器的代码分开。像这样：

class MyApp extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            minutes: 0,
            seconds: 10,
            play: false,
            display: "SESSION"
        }
        this.handlePlay = this.handlePlay.bind(this);
        this.handleTime = this.handleTime.bind(this);
    }

    // handlePlay only launches the timer.
    handlePlay() {
        this.Myvar = setInterval(this.handleTime, 200);
    }

    // handleTime deals with the logic of decrementing time.
    handleTime() {
        if (this.state.seconds > 0) {
            console.log(this.state.seconds)
            this.setState({
                seconds: this.state.seconds - 1
            })
        } else {
            console.log("minus")
            clearInterval(this.Myvar)
        }
    }
}

handlePlay

现在是UI（按钮单击）和逻辑（处理时间减少）之间的接口。它仅使用

setInterval

启动计时器

---

handleTime

处理时间减少的逻辑。每次

setInterval

触发并在时间结束后停止计时器时，都会调用它

嗨，谢谢你的回答。因此，我实现了您的解决方案，计时器在达到0时停止。我仍在尝试实现一种使用onclick属性启动/停止计时器的方法，因为似乎只要this.state.seconds>0的计算结果为false，else代码块就会不确定地运行，因为this.handleTimer仍在递归执行。看来clearInterval不是Clear interval。如果运行计时器，您可以看到else语句的console.log仍在无限地记录。这是你的贡献代码，我理解你的担忧。在查看您的代码之前，再次单击按钮时停止计时器的请求不是您原始帖子的一部分，因此您可以将我的答案保留为已接受；）它已经开始工作了，我添加了以下代码：handlePlay（）{if（this.state.play==false）{this.myVar=setInterval（this.handleTimer，200）；this.setState（{play:true}）else if（this.state.play==true）{clearInterval（this.myVar）this.setState（{play:false}}}

class MyApp extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            minutes: 0,
            seconds: 10,
            play: false,
            display: "SESSION"
        }
        this.handlePlay = this.handlePlay.bind(this);
        this.handleTime = this.handleTime.bind(this);
    }

    // handlePlay only launches the timer.
    handlePlay() {
        this.Myvar = setInterval(this.handleTime, 200);
    }

    // handleTime deals with the logic of decrementing time.
    handleTime() {
        if (this.state.seconds > 0) {
            console.log(this.state.seconds)
            this.setState({
                seconds: this.state.seconds - 1
            })
        } else {
            console.log("minus")
            clearInterval(this.Myvar)
        }
    }
}