Javascript 希望分别执行startHandler（）和useHandler（）（即当一个函数正在执行另一个函数时，另一个函数应该停止），但它们同时工作

以下是代码：

 state = {
    percentage: 0,
    visible: true,
    use: false
  };

 startHandler =() =>{                                       //use to start the timmer (i.e from 0 to 100)
     let status= this.state.percentage;

    const g=(status, callback)=>{
      if(status<=100 && !this.state.use)
      {
        //console.log(this.state.use)
        callback(status)
        status++;
        g(status, callback)
      }
      else
        return
    }  
    const k=(status)=>{
        setTimeout((status)=>{
            this.setState({percentage: status})
        }, status*1000, status);
    }
    g(status,k)
  }

  useHandler=()=>{                                               //used for contdown   
    let status= this.state.percentage;
    let temp=0;
    this.setState({use: true})
    //console.log(this.state.use)
    const g=(status, callback, temp)=>{
      if(status>=0)
      {
        callback(status,temp)
        status--;
        temp++;
        g(status, callback, temp)
      }
      else
        return
    } 

状态={
百分比：0，
可见：对，
用法：false
};
startHandler=（）=>{//用于启动定时器（即从0到100）
让status=this.state.percentage；
常量g=（状态，回调）=>{
如果（状态）{
设置超时（（状态）=>{
this.setState（{percentage:status}）
}，状态*1000，状态）；
}
g（地位，k）
}
useHandler=（）=>{//用于压缩
让status=this.state.percentage；
设温度=0；
this.setState（{use:true}）
//console.log（this.state.use）
常量g=（状态、回调、临时）=>{
如果（状态>=0）
{
回调（状态、临时）
地位--；
temp++；
g（状态、回调、临时）
}
其他的
返回
} 

我实际上正在做一个react项目，我想要一个倒计时和倒计时系统。上面两个功能都是用按钮start和use use onClick设置的。我期望的是，如果我按下start按钮，20秒后百分比将变为20，然后单击use按钮starHandler（）后函数将停止执行，百分比将减少到0。但我认为这两个函数同时执行导致意外的百分比结果。

---

请帮助我，并提供出现这种意外结果的原因。

我真的无法理解代码试图做什么。但根据我在这里了解的情况，它通常是如何工作的

class Test {
  constructor() {
    this.count = 0;
    this.timeOut = null;
  }

  startHandler() {
    this.timeout = setTimeout(() => {
      this.count += 20;
      ...
    }, 20000);
  }

  useHandler() {
    if (this.timeOut) {
      clearTimeout(this.timeOut); 
    }
    ...
  }
}

---

不要使用缩写词，如

const g=…

其他开发人员必须阅读整个内容才能理解g的含义；）

您应该只有一个与计数器交互的函数，而不是2个。您可以定义状态来修改计数器更新的方式

要更新计数器，我将使用如下生命周期事件：

constructor（）{
this.interval=未定义
}
componentDidMount（）{
this.interval=setInterval（this.YOUR_回调）
}
组件将卸载（）{
clearInterval（这是您的\u回调）
}

我以引用20为例。函数startHandler（）将从0开始计数到100，每次倒计时之间的间隔为1秒，useHandler（）函数将从调用时的数字倒计时到0，每次倒计时之间的间隔为1秒。