JavaScript中forEach循环为元素添加类名，无法实现逐个动画问题

问题根源 #

你这段代码里，forEach 遍历所有图片时，每个元素对应的 setTimeout 都设置了固定的100ms延迟。由于遍历过程几乎是瞬间完成的，所有定时器会在同一时间点开始计时，100ms后就会同时触发，自然所有图片的动画就同步执行了。

解决方法 #

方法一：利用forEach的索引设置递增延迟

直接借助forEach的第二个参数（当前元素的索引），给每个定时器设置依次递增的延迟时间，让每个图片的动画触发时间错开：

const images = document.querySelectorAll(".image");
images.forEach((image, index) => {
  setTimeout(function () {
    image.classList.add("move-image-left");
    console.log(image);
  }, 100 * (index + 1)); // 第一个元素延迟100ms，第二个200ms，以此类推
});

方法二：用setInterval控制序列执行

如果需要更直观的序列控制，可以用setInterval逐个处理图片，直到所有元素都完成动画：

const images = document.querySelectorAll(".image");
let currentIndex = 0;
const animationInterval = setInterval(() => {
  if (currentIndex >= images.length) {
    clearInterval(animationInterval); // 遍历结束后清除定时器
    return;
  }
  images[currentIndex].classList.add("move-image-left");
  console.log(images[currentIndex]);
  currentIndex++;
}, 100);

内容的提问来源于stack exchange，提问作者lei-san