代码之家 › 专栏 › 技术社区 › Brian Millot

计时器不会以clearInterval停止

clearinterval setinterval reactjs

Brian Millot · 技术社区 · 4 年前

我正在尝试构建一个简单的启动和停止计时器功能,但是当我再次单击该功能时,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>

1 回复 | 直到 4 年前

RiTeSh 4 年前

作为回报, 你作为函数返回,所以在函数中它不起作用,

将代码更改为

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 
  }
}

Varun Naharia David van Driessche 4 年前

在您的 handleStartToggle 您正在为其执行不同工作的功能 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 
}

}

推荐文章

Ângelo Rigo · ReactJS映射:如何迭代[关闭]

1 年前

Facundo Cabrera · 意外的应用程序错误!useNavigate()只能在<Router>组件的上下文中使用

1 年前

user29295031 · 如何使用react和vite覆盖Tailwinds css 4默认设计

1 年前

Gukkey · 在React中明确隐藏日期类型输入后,如果我单击父div,如何显示日期选择器?

1 年前

Luckkks · 过渡色工作不正常

1 年前

ModernEraCaveman · 如何对齐我的Bootstrap容器以适应网页的整个宽度?

1 年前

vatsal chauhan · 即使在字体预加载时,文本加载也很慢

1 年前

hasratyan · Next.js 15 API路由-动态路由中的无效GET导出错误[id]

1 年前

noblerare · Vite错误-未定义导出(SSR)

1 年前

ProfessorFinesse · 在默认表单中完成帖子请求时,“res.send”会去哪里?

1 年前