如何在 ReactJS 钩子中添加计时器

Question

我正在尝试添加计时器，问题陈述 - 当用户点击按钮时，它应该调用定时器来启动并在 3 秒后它应该执行一些事情。

我的代码不起作用

const [timer, setTimer] = useState(3);

useEffect(() => {
    if (timer > 0) {
      setTimeout(() => setTimer(timer - 1), 1000);
    } else {
      window.close();
    }
  }, [timer]);

function submitStartTimer(){                /*Button onClick=submitStartTimer()*/
    setTimer(3);
    swal({
      title: "Thank You!",
      text:
        "You have successfully Submitted your Data! This tab is going to close!",
      icon: "success",
      button: false,
    });
}

但是选项卡在 3 秒后自动关闭，我知道是因为 useEffect，但是我如何在单击 submitStartTimer() 后启动 useEffect？

Answer 1

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

您只需要从 0 开始计时。由于您从 3 开始计时，因此 useEffects 开始并从一开始就不断减少计时器，因为：

if (timer > 0) {
  setTimeout(() => setTimer(timer - 1), 1000);
}

由于 [timer] 已作为依赖项传递，每当它发生变化时，都会调用 useEffects，因此您会看到这种行为。您已经使用过：

setTimer(3) 在你的提交方法中，这样应该可以工作，只要你这样做：const [timer, setTimer] = useState(0);

另一种解决方案可能是从 useEffects 中的依赖项中删除 [timer] 并保留它 [].

Answer 2

我得到了解决方案，通过使用 Rahul 的答案稍作修改帮助我解决了它。

const [timer, setTimer] = useState(-1);

  useEffect(() => {
    if (timer > 0) {
      setTimeout(() => setTimer(timer - 1), 1000);
    } else if (timer === 0) {
      window.close();
    }
  }, [timer]);

function submitStartTimer(){
  setTimer(3);
    swal({
      title: "Thank You!",
      text:
        "You have successfully Submitted your Data! This tab is going to close!",
      icon: "success",
      button: false,
    });
}

如何在 ReactJS 钩子中添加计时器

how to add timer in ReactJS hooks

javascript

reactjs

react-hooks

use-effect