在React JS中，我正在尝试创建一个倒数计时器，但无法将第一秒变成一整秒

Question

我在componentDidMount内部使用间隔为1000毫秒的setInterval，这意味着，取决于用户何时按下提交按钮输入倒数时间，倒数的第一秒可能需要1毫秒至1000毫秒。 这是有问题的代码：

minusOne() {
  if(this.state.time > 0){
    this.setState({time: this.state.time -1});
  }
}

componentDidMount(){
  setInterval(() => this.minusOne(), 1000);
}

关于如何使第一秒始终花费1000ms的任何想法？ 谢谢

Answer 1

只需按一下按钮击中间隔而不是componentDidMount 。

onSubmit() { 
  ...
  // remove any previous interval (noop for undefined handle)
  clearInterval(this.state.countdownIntervalHandle); 
  this.setState({countdownIntervalHandle: setInterval(...)});
}

必要时不要忘记将clearInterval添加到componentWillUnmount 。

Answer 2

使用setTimeout将倒计时强制为1000ms。

componentDidMount(){
   setTimeout( setInterval( () => this.minusOne(), 1000), 1000);
};

wonkledge