Javascript 如何只调用一次setInterval

我有一个计数器，它应该每用户输入一秒钟更新一次计数

在我的代码中，我有两个日志，第一个是在间隔开始时，第二个是在需要清除间隔时

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

导出默认函数App（）{
const[count，setCount]=useState（0）；
常数[ms，setMS]=useState（1000）；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
console.log（“启动inteval”）；
setCount（（prevCount）=>prevCount+1）；
}，ms）；
return（）=>{
控制台日志（“清除间隔”）；
间隔时间；
};
}，[ms]）；
返回(
setMS（e.target.value）}>
{count}
);
}

问题是，行console.log（“Start inteval”）；每次我更新计数时都会收集

例如，如果延迟时间是1秒，那么console.log（“Start inteval”）；威尔每秒钟都会打电话来

---

我只需要打一次电话，可以吗？但是计数器应该运行…

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

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

---

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

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

---

这可以通过

标志解决。代码如下所示：

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

默认函数App（）{
const[count，setCount]=useState（0）；
常数[ms，setMS]=useState（1000）；
让第一个=真；
useffect（（）=>{
常量间隔=设置间隔（（）=>{
第一个&console.log（“启动内部”）；
第一个=假；
setCount（（prevCount）=>prevCount+1）；
}，ms）；
return（）=>{
控制台日志（“清除间隔”）；
间隔时间；
};
}，[ms]）；
返回(
setMS（e.target.value）}>
{count}
);
}
您可以这样做

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

const-App=（）=>{
const[count，setCount]=useState（0）；
常数[ms，setMS]=useState（1000）；
const[prev，setPrev]=useState（毫秒）
常数变化=（e）=>{
setMS（e）
setPrev（e）
}
常量runInterval=（）=>{
setPrev（“停止”）
如果（上一个===毫秒）
{
console.log（“开始间隔”）
}
setCount（（prevCount）=>prevCount+1）；
}
useffect（（）=>{
常量间隔=设置间隔（运行间隔，毫秒）；
return（）=>{
控制台日志（“清除间隔”）
间隔时间；
};
}，[ms，prev]）；
返回(
更改（如target.value）}>
{count}
);
}

从源代码更改ms后，此操作将在控制台中运行一次启动间隔。您好@Dibash sapkota，您不明白，我需要每隔1秒运行一次。您可以使用设置间隔和重置计时器