定时器不会随着 clearInterval 停止

Question

我正在尝试构建一个简单的启动和停止计时器功能，但是当我再次单击该功能时，clearInterval 似乎没有任何效果。事实上计时器并没有停止。但是我可以启动它，但我无法将其关闭。

const [seconds, setSeconds] = useState(0);
const [timer, setTimer] = useState();

const handleStartToggle = (seconds) => {
  // Start new timer only if it's not run yet
  if(!timer) {
    setTimer(setInterval(() => {
      setSeconds((current) => current + 1);
    }, 1000));
  // Else, it's already running, we stop it
  } else {
    return () => clearInterval(timer);
  }
}

<div className="row project-task-showcase">
  <h2 className="client-name"> {activeClient.name}</h2>
  <p className="task-name">{activeTask.name}</p>
  <img src={play} className="play" onClick={handleStartToggle} />
  {seconds}
</div>

Answer 1

return 中的问题，你 returning 作为函数，所以在函数中它不起作用，

将代码更改为

const handleStartToggle = (seconds) => {
  // Start new timer only if it's not run yet
  if(!timer) {
    setTimer(setInterval(() => {
      setSeconds((current) => current + 1);
    }, 1000));
  // Else, it's already running, we stop it
  } else {
    clearInterval(timer);   // <-- Change here
   // setTimer(null); // <-- To toggle next time 
  }
}

Answer 2

在您的 handleStartToggle 函数中，您正在为 if 和 else 语句做不同的工作。对于 if 你正在执行一些语句但是对于 else 你正在 returning 一个不正确的箭头函数。要更正此问题，您必须在两个

中使用 return 函数

const handleStartToggle = (seconds) => {
// Start new timer only if it's not run yet
if(!timer) {
   return () => {setTimer(setInterval(() => {
     setSeconds((current) => current + 1);
   }, 1000));
 }
// Else, it's already running, we stop it
} else {
  return () => clearInterval(timer);
 }
}
<div className="row project-task-showcase">
<h2 className="client-name"> {activeClient.name}</h2>
<p className="task-name">{activeTask.name}</p>
<img src={play} className="play" onClick={()=> handleStartToggle()} />
{seconds}
</div>

或两者都使用语句

const handleStartToggle = (seconds) => {
// Start new timer only if it's not run yet
if(!timer) {
  setTimer(setInterval(() => {
    setSeconds((current) => current + 1);
  }, 1000));
// Else, it's already running, we stop it
} else {
  clearInterval(timer);   // <-- Change here
  setTimer(null); // <-- To toggle next time 
}

}

定时器不会随着 clearInterval 停止

The timer does not stop with clearInterval

setinterval

clearinterval

reactjs