Reactjs 如何在JSX中停止超时

我有一个按钮，点击调用一个函数。 此函数中有一个for循环，该循环超时，如下所示：

for (let i = 0; i < animations.length; i++) {
      setTimeout( () => { ... }, ANIMATION_SPEED);
}

for（设i=0；i{…}，动画速度）；
}

我想能够停止这个超时，并与它创建的动画，点击另一个按钮

---

是否可能？

如果保存函数的返回值

你可以用它来阻止她

const timeOut = setTimeout(function, milliseconds);

clearTimeout(timeOut);

您可以保存阵列上的所有超时

const timeouts = [];

timeouts.push( setTimeout(function, milliseconds));

然后，当您要清除它们时：

for (var i = 0; i < timeouts.length; i++) {
    clearTimeout(timeouts[i]);
}
//clear array
timeouts = [];

for（变量i=0；i

一个使用useRef的示例

function Counter() {
  const [count, setCount] = React.useState(0);
  const id = React.useRef([]);

  const clearSetTimeout = () => {
    for (let i = 0; i < 8; i++) {
      clearTimeout(id.current[i]);
    }
  };

  React.useEffect(() => {
//here add time out
    for (let i = 0; i < 8; i++) {
      id.current[i] = setTimeout(() => {
        setCount((c) => c + 1);
      }, 2500);
    }
    return clearSetTimeout;
  }, []);

函数计数器（）{
const[count，setCount]=React.useState（0）；
const id=React.useRef（[]）；
常量clearSetTimeout=（）=>{
for（设i=0；i<8；i++）{
clearTimeout（id.current[i]）；
}
};
React.useffect（（）=>{
//这里添加超时
for（设i=0；i<8；i++）{
id.current[i]=设置超时（（）=>{
设置计数（（c）=>c+1）；
}, 2500);
}
返回清除超时；
}, []);

---

谢谢。但是如果它来自两个不同的函数，我该怎么做呢？比如如果我在一个函数中声明const“timeout”，我该如何在另一个函数中使用它呢？你可以使用

React.useRef（）

你知道吗？你可以在这里看到一个

useRef

的例子嗨，我尝试了所有方法，但似乎都不起作用。即使我知道“clearTimeout（timeout）”，从代码中的任何地方，动画都会继续显示在网站上。我真的不知道该怎么做。就像for循环和动画开始时，在它们完成之前，没有办法结束它们。有什么建议吗？