Question

我正在构建一个乘法测试应用程序，我希望每个问题都有一个8秒钟的倒数计时，以便在答案结束时重置。我的问题是，当我的组件重新渲染setTimeout的另一个实例时，这意味着我倒数了两秒钟，然后是3秒，等等。

处理此问题的正确方法是什么？

我的组件：

class Question extends Component {
    constructor(props){
        super(props);
        this.state = {
            answer: "",
            correct: false,
            timer: 8
        } 

        this.countDownTrack = null;

        this.checkAnswer = this.checkAnswer.bind(this);
    }

    countDown() {
        let number = this.state.timer;
        if (number > 0 && this.state.correct === false){
            number--
            this.setState({
                timer: number
            })
        } else {
            this.props.sendAnswer(this.state.answer, this.props.randIndex);
            this.setState({
                timer: 8
            })
        }
    }

    //what we want is for there to be a single setTimeout

    CountDownHandle = () => {
        this.countDownTrack = setTimeout(()=>{
            this.countDown();
        },1000)
    }


    checkAnswer = (e) => {
        e.preventDefault();
        this.props.sendAnswer(this.state.answer, this.props.randIndex);
        this.setState({
            answer: "",
            timer: 8
        })
    }


    handleChange = (event) => {
        this.setState({
            answer: event.target.value
        })
    }


    render(){

        this.CountDownHandle();

        let countShow;
        countShow = this.state.timer;

            return (
                <div className="Question">
                <h1>What is</h1>
                <h1><span id="table1">{parseInt(this.props.no1)}</span> X <span id="table2">{parseInt(this.props.no2)}</span>?</h1>
                <form action="" onSubmit={this.checkAnswer}>
                <input autoComplete="off" type="text" name="answer" onChange={this.handleChange} value={this.state.answer}/>
                </form>
                <p>{countShow}</p>
                </div>
            );
        }
    }


export default Question;

Answer 1

您需要使用此功能清除超时以重新渲染组件：

        clearTimeout(this.trackingTimer);

它可能是countDown（）中其他代码块的一部分。

Answer 2

记住要清除通过ComponentWillUnmount卸载组件时的超时。这样可以确保在后台没有多余的计时器在运行。

Answer 3

您的代码结构有2个问题：

如果您想显示可见的倒数（例如8,7,6，...）

使用“ setInterval”

而不是“ setTimeout”

将计时器事件触发函数放置在render函数之外，例如在componentDidMount，按钮单击，输入焦点或对单个动作的响应中。

另外，要控制超时为单数，请检查实例是否存在1st。

if(!this.countDownTrack)
  this.countDownTrack = setInterval(
   ()=>{

     this.countDown();
     if(this.state.timer < 1)
        clearInterval(this.trackingTimer);


    },1000)

在React中设置一个setTimeout

3 个答案: