如何让 setInterval 在应用延迟之前运行一次回调函数

Question

我正在使用Effect钩子运行setInterval来循环一个函数，但是，我希望能够在应用延迟(间隔(之前先运行一次该函数。有没有办法在应用延迟之前在 useEffect 钩子中运行一次函数？

在 setInterval 函数之前，我尝试在钩子内运行一次函数，但它没有给我我希望的结果。在useEffect钩子之外运行函数也是如此。

  const myText = props.text;
  const textTimeout = 100;
  const funTextInterval = textTimeout * myText.length
  const [quickText, setQuickText] = useState([]);
  const setDelay = (i) => {
    setTimeout(() => {
       myFunction();
     , textTimeout * i);
  };
  useEffect(() => {
    setInterval(() => {
      for (let i = 0; i < myText.length + 1; i++) {
        setDelay(i);
      }
    }, funTextInterval);    
  }, []);

我希望forloop在 setInterval 的延迟启动之前运行一次，但延迟发生在forloop

Answer 1

取出方法中的 for 循环逻辑，并在 setInterval 之前和 setInterval 内部调用它

const myText = props.text;
  const textTimeout = 100;
  const funTextInterval = textTimeout * myText.length
  const [quickText, setQuickText] = useState([]);
  const setDelay = (i) => {
    setTimeout(() => {
       myFunction();
     , textTimeout * i);
  };
  useEffect(() => {
    const loop = () => {
      for (let i = 0; i < myText.length + 1; i++) {
        setDelay(i);
      }
    }
    loop();
    setInterval(() => {
      loop();
    }, funTextInterval);    
  }, []);

Answer 2

你可以像这样分离你的逻辑：

  const myText = props.text;
  const textTimeout = 100;
  const funTextInterval = textTimeout * myText.length
  const [quickText, setQuickText] = useState([]);
  function applyTextEffect() {
      for (let i = 0; i < myText.length + 1; i++) {
        setTimeout(myFunction, textTimeout * i);
      }
  }
  useEffect(() => {
    applyTextEffect()  // call it here immediately to get the effect you want.
    setInterval(applyTextEffect, funTextInterval);    
  }, []);

但请注意，此组件将通过在每次更新时调用文本效果函数来创建不需要的效果。UseEffect在每次更新中都有效。最好有一个isMount状态变量，并围绕它实现逻辑，只应用一次效果。

编辑：存储从setInterval函数返回的间隔id并清除它以返回useEffect也是明智的。否则，当你的组件要被销毁时，你会得到异常

Answer 3

只用for循环编写一个单独的函数。
在调用 useEffect(( 之前调用该函数。
从内部 useEffect(( -> setInterval((，调用新方法。

下面给出了未经测试的代码以作说明。

const myText = props.text;
const textTimeout = 100;
const funTextInterval = textTimeout * myText.length
const [quickText, setQuickText] = useState([]);
const setDelay = (i) => {
  setTimeout(() => {
     myFunction();
   , textTimeout * i);
};
runloop(){
  for (let i = 0; i < myText.length + 1; i++) {
    setDelay(i);
  }
}
useEffect(() => {
  setInterval(() => {
    runloop()
  }, funTextInterval);    
}, []);
runloop();