Question

我有一个计数器，它应该在用户输入的每一秒内将 count 更新 1。

在我的代码中，我有 2 个日志，第一个是间隔开始时的，第二个是我需要 clearInterval 时的。

export default function App() {
  const [count, setCount] = useState(0);
  const [ms, setMS] = useState(1000);

  useEffect(() => {
    const interval = setInterval(() => {
      console.log("Start inteval");
      setCount((prevCount) => prevCount + 1);
    }, ms);

    return () => {
      console.log("Clear interval");
      clearInterval(interval);
    };
  }, [ms]);

  return (
    <div className="App">
      <input value={ms} onChange={(e) => setMS(e.target.value)}></input>
      <h1>{count}</h1>
    </div>
  );
}

问题是，那行 console.log("Start inteval");每次更新计数时都会收集。

例如，如果延迟时间是 1 秒，那么 console.log("Start inteval");每秒都会调用一次。

我只需要调用一次，这可能吗？但是计数器应该运行...

Answer 1

您可以使用 setTimeout 延迟只运行一次代码

setTimeout(function(){ alert("Hello"); }, 3000);

您可以使用设置间隔和重置计时器

let timer= setInterval(function() {
  console.log('timer');
  clearTimeout(remaingTime);
}, 1000);

Answer 2

这可以用 flag 解决。代码变成这样：

default function App() {
  const [count, setCount] = useState(0);
  const [ms, setMS] = useState(1000);
  let first = true;

  useEffect(() => {
    const interval = setInterval(() => {
      first && console.log("Start inteval");
      first = false;
      setCount((prevCount) => prevCount + 1);
    }, ms);

    return () => {
      console.log("Clear interval");
      clearInterval(interval);
    };
  }, [ms]);

  return (
    <div className="App">
      <input value={ms} onChange={(e) => setMS(e.target.value)}></input>
      <h1>{count}</h1>
    </div>
  );
}

Answer 3

你可以这样做。

const App=()=> {
  const [count, setCount] = useState(0);
  const [ms, setMS] = useState(1000);
  const [prev ,setPrev] = useState(ms)

  const changeMs = (e) => {
    setMS(e)
    setPrev(e)
  }

  const runInterval = () => {
    setPrev("stop")

    if(prev===ms)
    {
      console.log("start Interval")
    }
    setCount((prevCount) => prevCount + 1);

  }
  useEffect(() => {
    const interval = setInterval(runInterval, ms);
    return () => {
      console.log("clear interval")
      clearInterval(interval);
    };
  }, [ms,prev]);

  return (
    <div className="App">
      <input value={ms} onChange={(e) => changeMs(e.target.value)}></input>
      <h1>{count}</h1>
    </div>
  );
}

这将在 ms 更改后仅在控制台中运行一次启动间隔

如何只调用一次 setInterval

3 个答案: