如何检查一个数字是否大于useEffect中的另一个数字

Question

Js对我来说很难>：|

export default function Timer() {
  const [timer, setTimer] = useState(10000);

  useEffect(() => {
    setInterval(() => {
      if (Number(timer) > Number(6000)) {
        setTimer((prevCount) => prevCount - 100);
      }
    }, 100);
  }, []);
  
  console.log(timer);

为什么这个计时器在达到 6000 时不停止倒计时？

Answer 1

你不需要setInterval 。 让useEffect仅在计时器更改时运行，这是通过将timer作为参数传递来完成的。

此链接描述了如何优化useEffect

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

function setTimerToNewValue() {
  setTimer(timer - 100);
}

useEffect(() => {
  if (timer > 6000) {
    setTimerToNewValue();
  }
}, [timer]);
console.log(timer);

在此示例中， useEffect将在timer更改后立即执行。

这是setInterval的另一个实现

function setTimerToNewValue() {
  setTimer((timer) => timer - 100);
}

useEffect(() => {
  let z;
  if (timer > 6000) {
    z = setInterval(() => {
      setTimerToNewValue();
    }, 1000);
  }

  return () => clearInterval(z);
}, [timer]);

演示在这里

Answer 2

如果你必须使用定时器，你可以使用这个代码

export default function Timer() {
    const [timer, setTimer] = useState(10000);
 
    useEffect(() => {
        console.log(timer)
        const interval = setInterval(() => {
            if (timer>6000)
            setTimer(timer => timer - 1000);
        }, 1000);
        return () => clearInterval(interval);
    })
}