反应倒数计时器不准确

Question

初学者在这里。我正在尝试制作一个从 3 到 0 的倒数计时器。该应用程序将秒数呈现到屏幕上，但速度非常快。我尝试更改时间间隔，但它似乎不再使时间准确。我不知道出了什么问题。任何帮助表示赞赏。import React from "react";export default class Timer extends React.Component {    constructor(){        super();        this.state = {            time: 3,        }        this.countdown = this.countdown.bind(this);        this.timer = this.timer.bind(this)    }    timer(){                let interval = setInterval(() => this.countdown(interval),1000)                return this.state.time    }    countdown(t){        if(this.state.time == null)        {            console.log("NULL")        }        let myTime = this.state.time                if(myTime > 0) {            myTime--;            this.setState({time: myTime})            console.log(myTime)        } else {            clearInterval(t)        }        return myTime;    }    render() {      return (        <div id = "Timer">          <p>              {this.timer()}          </p>           </div>              );    }  }

Answer 1

第一个评论您帖子的用户是对的。但让我澄清一下。

这就是我认为正在发生的事情。组件第一次呈现时执行 timer() 方法，该方法设置计时器间隔。第一秒后，执行间隔回调，这会更改组件状态，并反应安排重新渲染您的组件。然后，组件重新渲染自己，并在设置新间隔的第 2 秒（请原谅这个多余的短语）之前再次执行 timer() 函数。这种情况会发生，直到您清除间隔，这是您的代码设置的最后一个间隔。这就是为什么您注意到可变时间的值变化异常快的原因。

你应该做这样的事情：（这是你的相同代码，有一些变化，可能对你理解更有用。然后你可以给出你自己的风格或个人风格）

import React from "react";

export default class Timer extends React.Component {

constructor(){

    super();

    this.state = {

        time: 3,

    }

    this.countdown = this.countdown.bind(this);

    this.timer = this.timer.bind(this)

}

componentDidMount() {

  this.interval = setInterval(() => 

    this.countdown(interval),1000

  );

}

componentWillUnmount() {

  if (this.interval) {

     clearInterval(this.interval);

  }

}

countdown(){

    if(this.state.time == null)

    {

        console.log("NULL")

    }

    let myTime = this.state.time

    

    if(myTime > 0) {

        myTime--;

        this.setState({time: myTime})

        console.log(myTime)

    } else {

        clearInterval(this.interval)

    }

    return myTime;

}

render() {

  return (

    <div id = "Timer">

      <p>

          {this.state.time}

      </p>

    </div>

  );

}

}

干杯!

Answer 2

我会componentDidMount在这里开始间隔。您只想创建一次间隔，然后在它完成倒计时或组件在计时器达到 0 之前卸载时清理它。您可以在此基础上构建额外的功能来执行停止/重新启动等操作......等等

export default class Timer extends React.Component {

  state = {

    time: this.props.start || 3

  };

  options = {

    interval: this.props.interval || 1000

    step: this.props.step || 1

  };

  interval = null;

  componentDidMount() {

    this.countdown()

  }

  componentWillUnmount() {

    clearInterval(this.interval)

  }

  tick = () => {

    this.setState(

      ({ time }) => ({ time: time - this.options.step }),

      () => {

        if (this.state.time === 0) {

          clearInterval(this.interval);

        }

      }

    );

  }

  countdown = () => {

    this.interval = setInterval(this.tick, this.options.interval);

  }

  render() {

    return (

      <div id="Timer">

        <p>{this.state.time}</p>

      </div>

    );

  }

}

这是一个可以玩的演示:)