如果满足条件，您可以清除 setInterval 吗？不使用 componentDidMount？

Question

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

直到现在计时器在 0 秒后继续减少。这是我的代码笔草稿：https://codepen.io/tonytony92/pen/bGdJeRg

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


    handlePlay() {
        let func1 = () => {
            this.setState({
                seconds: this.state.seconds - 1
            })
            console.log(this.state.seconds)
        }

        if (this.state.seconds > 0) {
            this.Myvar = setInterval(() => {
                console.log(this.state.seconds)
                this.setState({
                    seconds: this.state.seconds - 1
                })
            }, 200)
        }
        else {
            console.log("minus")
            clearInterval(this.Myvar)  /// not clearing ///
        }
    }
}

Answer 1

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 触发并在时间结束后停止计时器时调用它。

如果满足条件，您可以清除 setInterval 吗？不使用 componentDidMount？

Can you clear setInterval if a condition is met? without using componentDidMount?

javascript

this

reactjs

react-redux