如果相同的函数已经在执行，如何停止函数执行？

Question

我有一个函数，它使用 CSS 动画动态更改页面上的对象。

我从 onclick 和 touchend 事件中调用此函数。

如果动画仍在进行中，我想阻止此函数运行/调用。

奇怪的是，在下面的代码中，即使来自 console.log(isLoading) 的 isLoading 等于 false，也会调用函数 changeItem。

  const [isLoading, setIsLoading] = useState(false);

  const changeItemHandler = (mod, index) => {
    console.log(isLoading);
    if (isLoading === true) return;
    else {
      setIsLoading(true);
      changeItem(mod, index);     //at the end of animation setIsLoading(false) is called
    }
  };

我尝试过 Julien Ripet 的回答，但遇到了同样的问题。 现在使用该代码：

const [animAttrs, setAnimAttrs] = useState({isLoading: false, mod: null, index: null});
  const changeItemHandler = (mod, index) => {
    if (animAttrs.isLoading === true) return;
    else setAnimAttrs({ isLoading: true, mod: mod, index: index });
  };

  useEffect(() => {
    if (animAttrs.mod == null) return;  
    //needed to not call this function only after click or swipe
    else changeItem(animAttrs.mod, animAttrs.index);  
    //onanimationend i call setAnimAttrs({isLoading:false,mod:null,index:null});
  }, [animAttrs]);

即使 animAttrs.isLoading === true，它也会调用 changeItem 函数。我无法解释这种行为。

Answer 1

useState 钩子是异步的，因此当再次调用该函数时，您的状态不会更新。

你也许可以将你的逻辑转移到一个 useEffect 钩子上，观察 isLoading 状态？

更多信息请见this question