清除间隔不适用于 javascript 中的 transitionend 事件

Question

因此，正如标题所说，在将 setInterval 与 transitionend 事件一起使用时，我在清除间隔时遇到了问题，我有一段代码，我在其中声明了一个名为 [=16= 的变量] 在 window.onload 函数中，我想在某些条件变为真时清除该间隔，但问题是该间隔没有被清除并且函数保持运行。下面是我的代码片段。

window.onload = () => {
    let number = 0;
    const container = document.querySelector(".container");
    container.style.opacity = 1;
    container.style.transform = "translateX(0%)";
    const colorChanger = document.querySelectorAll(".color-changer");
    const colors = ["red", "blue", "green", "yellow"];
    let interval;
    container.addEventListener("transitionend", () => {
        interval = setInterval(() => {
        colorChanger[number].style.backgroundColor = colors[number];
        number++;
        if(number === 3) {
         clearInterval(interval);
        }
       }, 500);
    });
};

这是HTML

<div class="container">
</div>
<span class="color-changer">Some</span>  
<span class="color-changer">Text</span> 
<span class="color-changer">Here</span> 
<span class="color-changer">!</span>

这是CSS

.container  {
    opacity: 0;
    transition-duration: 3s;
    transition-property: transform, opacity;
    transform:translateX(-20%);
}

Answer 1

可能是“colorChanger[number]”的“Uncaught TypeError” 您必须检查：

interval = setInterval(() => {
    if(!colorChanger[number] || number > 3) {
        clearInterval(interval);
        return;
    }
    colorChanger[number].style.backgroundColor = colors[number];
    number++;
}, 500);

Answer 2

问题是您正在转换两个属性：opacity 和 transform，因此 transitionend 事件会触发两次，

window.onload = () => {
  let number = 0;
  const container = document.querySelector(".container");
  container.style.opacity = 1;
  container.style.transform = "translateX(0%)";
  container.addEventListener("transitionend", (evt) => {
    console.log("fired for", evt.propertyName);
  }, 500);
};

.container  {
  opacity: 0;
  transition-duration: 1s;
  transition-property: transform, opacity;
  transform:translateX(-20%);
}

<div class="container">
</div>

两个间隔运行并行，interval变量只指向最后一个间隔的id，所以第一个不能再停止了。

为了避免这种情况，您可以简单地设置 addEventListener 的 once 选项，这样您的处理程序只被调用一次：

window.onload = () => {
  let number = 0;
  const container = document.querySelector(".container");
  container.style.opacity = 1;
  container.style.transform = "translateX(0%)";
  const colorChanger = document.querySelectorAll(".color-changer");
  const colors = ["red", "blue", "green", "yellow"];
  let interval;
  container.addEventListener("transitionend", () => {
      interval = setInterval(() => {
        colorChanger[number].style.backgroundColor = colors[number];
        number++;
        if (number === 3) {
          clearInterval(interval);
        }
      }, 500);
    }, {
      once: true
    } // make it fire only once
  );
};

.container {
  opacity: 0;
  transition-duration: 1s;
  transition-property: transform, opacity;
  transform: translateX(-20%);
}

<div class="container">
</div>
<span class="color-changer">Some</span>
<span class="color-changer">Text</span>
<span class="color-changer">Here</span>
<span class="color-changer">!</span>

清除间隔不适用于 javascript 中的 transitionend 事件

Clear interval not working with transitionend event in javascript

javascript

setinterval

clearinterval