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

Question

我在useEffect钩子中运行setInterval来循环函数，但是，我希望在应用延迟（interval）之前能够先运行该函数一次。在应用延迟之前，是否有一种方法可以在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循环编写单独的函数。
在调用useffect（）之前先调用该函数。
从内部useffect（）调用-

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

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

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);    
  }, []);

但是请注意，这个组件将通过在每次更新时调用文本效果函数来创建不必要的效果。在每次更新中使用效果。最好有一个is挂载状态变量，并围绕它实现逻辑，以便只应用一次效果。

编辑：存储从setInterval函数返回的interval id并在返回useEffect时清除它也是明智的。否则，当您的组件将被销毁时，您将得到异常

Answer 3

取出方法中的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);    
  }, []);