计时器不会以 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

作为回报的问题，你作为函数返回，所以在函数中它不起作用，

将代码更改为

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 ，您将返回一个不正确的箭头函数。 要纠正此问题，您必须在两者中都返回函数

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 
}

}