Question

我正在使用setTimeout函数显示3 .. 2 .. 1 ..在开始实际功能之前先输入文字

但是有时应用会冻结为2或1或GO，并直接跳至实际功能。

我的代码如下：

  setInterval(() => {
      _this.setState({
        timer: _this.state.timer - 1
      })
      if (_this.state.timer == 0) {
        _this.setState({ timer: 'GO' })
      }
    }, 1000)

因此，计时器每减少一秒便将其值减小至0，这表明GO 但是我的应用程序冻结了谁能帮我解决这个问题谢谢

Answer 1

根据您的代码，您使用的是setInterval，而不是setTimeout。您需要清除间隔。 clearInterval()

Answer 2

setInterval(() => {
      _this.setState({
        timer: _this.state.timer - 1
      })
      if (_this.state.timer == 0) {
        _this.setState({ timer: 'GO' })
      }
    }, 1000)

您需要知道setState是asynchronous function，有时，就您的if语句而言，timer的值可能不会更改。

为进行解释，请考虑以下问题：

// assuming this.state = { value: 0 };
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});
this.setState({ value: this.state.value + 1});

在处理完所有上述调用之后，this.state.value将为1，而不是我们期望的3！

我建议您将函数重新构造为：

setInterval(() => {
  let prevtime = this.state.timer
  this.setState({
    timer: prevtime - 1
  })
  if (prevtime - 1 == 0) {
    this.setState({ timer: 'GO' })
  }
}, 1000)

有关setState和异步函数的更多详细信息，请访问here

Answer 3

您可以像这样使用。由于setInterval和setState都是异步的。

let timer = this.state.timer
let interval = setInterval( () => {
  if(typeof timer === "number"){
    timer--;
  }
  if(timer === 0){  //once the timer goes 0 then it clears interval
    clearInterval(interval)   //to clear Interval
    this.setState({ timer: "Go"})
  }else{           
    this.setState({ timer: timer})
  }      
}, 1000)

setTimeout将我的应用程序冻结在本机响应中

3 个答案: