javascript - setTimeout 无法按 css 预期工作

Question

var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function ()
{
  slides = document.getElementsByClassName("mySlides");
  slidePictures();
}



function slidePictures() {
  
  slides[myIndex].style.display = "block";
  slides[myIndex].className += " fadeIn";
  console.log(slides[myIndex]);
  
  
  setTimeout(function () 
  {
    slides[myIndex].className = "mySlides";
    console.log(slides[myIndex]);
    
    setTimeout(function () 
    {
      slides[myIndex].style.display = "none";
      console.log("display none");
    }, 1000);
    
  }, 2000);

  
  lastIndex = myIndex;
  myIndex++;
  if (myIndex >= 3)
    return;
  setTimeout(slidePictures, 4000);
}

.slidesDiv>img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  opacity: 0;
  transition: opacity 1s;
}

.fadeIn {
  opacity: 1 !important;
  transition: opacity 1s;
}

<div class="slidesDiv">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <img class="mySlides" src="//placehold.it/200x80/0bf">
  <img class="mySlides" src="//placehold.it/200x80/fb0">
  <img class="mySlides" src="//placehold.it/200x80/0fb">
  <h1 id="indicator"> Indicator </h1>
</div>

所以我的问题是，图像第一次淡出，但之后没有淡出，也没有消失？

这绝对是 setTimeout 函数的问题，我想知道我在做什么/假设不正确。

Answer 1

为了简洁起见，我对您的代码进行了一些编辑，并且还删除了额外的 transition来自.fadeIn因为你已经拥有了 slidesDiv>img 的一部分.

在您的示例中，您的程序流程有点难以理解，并且您使用了很多变量，这些变量不清楚它们来自哪里(例如 slides 和 myIndex )，所以这是原因的一部分很难弄清楚为什么会失败。

希望我正确理解了您想要实现的目标，并且以下内容应该适合您。就可读性而言，它绝对不是最好的，您也许可以将一些嵌套的 setTimeouts 提取到其他函数中，但我不想修改太多的初始代码:

var myIndex = 0;
var lastIndex = null;
var slides;
window.onload = function() {
  slides = document.querySelectorAll(".mySlides");
  slidePictures(slides);
}

function slidePictures(slides) {
  var time = 0;
  slides.forEach((slide) => {
    setTimeout(() => {
      slide.style.display = "block";
      slide.className += " fadeIn";
      setTimeout(function() {
        slide.className = "mySlides";
        setTimeout(function() {
          slide.style.display = "none";
        }, 1000);
      }, 2000);
    }, time);
    time += 4000;
  });
}

.slidesDiv>img {
  width: 80%;
  height: 80%;
  margin-left: 10%;
  opacity: 0;
  transition: opacity 1s; 
}

.fadeIn {
  opacity: 1 !important;
}

请参阅这支笔的完整示例:http://codepen.io/rarmatei/pen/apramB