在javascript中不处理transitionend事件的清除间隔

Question

因此，正如标题所述，在使用setInterval和transitionend事件时，清除间隔有问题，我有一段代码，其中我在window.onload函数中声明了一个名为interval的变量，我希望在某些条件变为真时清除该间隔，但问题是，该间隔没有被清除，函数继续运行。下面是我的代码片段。

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

问题是您正在转换两个属性：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的addEventListener选项，以便您的处理程序只被调用一次：

​

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>

​

Answer 2

可以是"Uncaught“表示"colorChangernumber”，您必须检查：

​

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

​