如何重新触发包含setTimeout回调和动画的click元素

问题描述

在下面的示例中，我设法突出显示了一个单击的div元素及其父元素，然后以相同的顺序将它们设置为白色，并且每个元素之间稍有延迟（请尝试一下代码段）。

我要添加的是，如果用户在整个动画（突出显示并变为白色，基本上返回初始状态）结束之前再次单击div元素之一，则应重新启动动画

解决方法

您可以存储setTimeout返回的所有ID，然后在再次单击用户时将其清除。如果此新点击发生在所有动画完成之前，那么它将停止它们，但是如果在动画完成之后出现，则它什么也不做，这就是您想要的

例如

let pendingAnimations = [];

allDivElements.forEach((div) => {
  div.addEventListener("click",function () {
    pendingAnimations.forEach(id => clearTimeout(id));
    pendingAnimations = [];

    const id1 = setTimeout(() => {
      changeBg(this,true);

      const id2 = setTimeout(() => {
        changeBg(this,false);
        timeout = 300;
      },timeout);

      pendingAnimations.push(id2);
    },timeout);

    pendingAnimations.push(id1);
    timeout += 300;
  });
});

click frontend javascript