时间戳

首页 > 解决方案 > 无法让 React 倒数计时器停止

reactjs - 无法让 React 倒数计时器停止

问题描述

我是 React 的新手，但我发现并修改了一个倒数计时器来满足我的目的。但是，我不知道如何让计时器停止。我只希望输出在完成时读取“0:00”。

所以我不包括设置时间量的组件的开头，但这是其余的：

  const timeBetween = targetTime - currentTime;
  const seconds = Math.floor((timeBetween / 1000) % 60);
  const minutes = Math.floor((timeBetween / 1000 / 60) % 60);

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(Date.now());
    }, 1000);

    return () => clearInterval(interval);
  }, []);

  return (
    <>
      <div className="content2">
        <p style={{ color: "white" }}>We start in:</p>
        <p style={{ color: "white" }}>
          <span>{`${minutes}:${seconds < 10 ? "0" : ""}${seconds}`}</span>
        </p>
      </div>
    </>
  );

标签： reactjstimer

解决方案

你在正确的轨道上，你只需要在你之前添加一个检查条件setCurrentTime

只需检查 targetTime 是否已经超过当前时间，如果时间已过，则删除间隔。

const interval = setInterval(() => {
  if (targetTime > new Date()) {
    setCurrentTime(Date.now());
  } else {
    clearInterval(interval);
  }
}, 1000);

这是一个有效的stakblitz 示例

推荐阅读