jquery淡入/淡出，自定义幻灯片故障，淡入淡出记忆？淡出队列？

Question

我正在构建一个背景 img 幻灯片，但遇到了我无法理解的故障。

我有几个包含图像列表的对象。我有两个函数可以获取这些图像，每个创建一个 div，并将 imgs 添加为这些 div 的背景，所有这些都在一个容器中。

然后，如this website 中所述，我淡出第一个 div，并淡入第二个，然后将第一个子元素移动到最后一个子元素位置，然后循环，创建幻灯片效果。

当我想要这个超过 i .empty() 容器时。然后该过程可以从相同或另一个对象重新开始。

我第一次这样做时，它可以工作，但第二次、第三次……它开始出现故障。不仅是两个，而且所有的 div 都开始淡入淡出，我不知道是什么原因

即使我在第一次、第二次、第三次...尝试中使用相同的对象也会发生这种情况。

看起来虽然 div 已从 DOM 中删除，但显然还有一些关于它们的记忆？这可能与创建的 div 与以前创建的 div 共享名称有关吗？也许淡出保留某种我不知道的内部队列？

这是一个 JsFiddle：

https://jsfiddle.net/93h51k9m/11/

和代码：

$(document).ready(function(){ 

var imgObject = {
imgs: ['http://lorempixel.com/400/200/sports/1/','http://lorempixel.com/400/200/sports/2/','http://lorempixel.com/400/200/sports/3/']
};
var imgObject2 = {
imgs: ['http://lorempixel.com/400/200/sports/4/','http://lorempixel.com/400/200/sports/5/','http://lorempixel.com/400/200/sports/6/']
};
var noImgObject = {
};
function prepare(index) {
  if ($("#cover").css("display") != "none") {
            console.log("cover is visible: hide it first");
        console.log("fadeOut cover in 3000ms");
        $("#cover").fadeOut(3000, function() {
      console.log("then empty cover")
      $("#cover").empty();
      console.log("now for the images")
      roll(index);
    });
  } else {
    console.log("cover is already hidden: now for the images");
    roll(index);
  };
};

function roll(index) {
  if (typeof index.imgs != "undefined") {
        console.log("called object has images")
        console.log("get them and their numbers")
    var imgs = index.imgs;
    var imgsLength = imgs.length;
    console.log("create as many divs as imgs, and place each img as bg in each div")
    for (i = 0; i < imgsLength; i++) {
      $("#cover").append("<div class='imgdiv" + i + "'></div>");
      $(".imgdiv" + i).css("background-image", "url('"+imgs[i]+"')");
    };
        console.log("now hide all but first div, fadeIn cover and start the carousel");
    //as seen at http://snook.ca/archives/javascript/simplest-jquery-slideshow
    $('#cover').fadeIn(3000);
    $('#cover div:gt(0)').hide();
    setInterval(function() {
        console.log("fade and swap")
      $('#cover :first-child').fadeOut(3000)
        .next('div').fadeIn(3000)
        .end().appendTo('#cover')
    }, 6000);
  } else {
    console.log("index has no images, nothing to do");
  };
};

$("#imgobj").click(function(){
    console.log("imgObject called");
    prepare(imgObject);
});
$("#imgobj2").click(function(){
    console.log("imgObject2 called");
    prepare(imgObject2);
});
$("#noimgobj").click(function(){
    console.log("noImgObject called");
    prepare(noImgObject);
});

});

谢谢

Answer 1

每次调用click 事件时，都会启动另一个间隔，这就是原因，操作会附加在queue 中

使用global 变量，该变量将保存setInterval 实例和clear，每次您开始新的间隔时。

var interval;
$(document).ready(function() {
  var imgObject = {
    imgs: ['http://lorempixel.com/400/200/sports/1/', 'http://lorempixel.com/400/200/sports/2/', 'http://lorempixel.com/400/200/sports/3/']
  };
  var imgObject2 = {
    imgs: ['http://lorempixel.com/400/200/sports/4/', 'http://lorempixel.com/400/200/sports/5/', 'http://lorempixel.com/400/200/sports/6/']
  };
  var noImgObject = {};

  function prepare(index) {
    clearInterval(interval);
    if ($("#cover").css("display") != "none") {
      console.log("cover is visible: hide it first");
      console.log("fadeOut cover in 3000ms");
      $("#cover").fadeOut(3000, function() {
        console.log("then empty cover")
        $("#cover").empty();
        console.log("now for the images")
        roll(index);
      });
    } else {
      console.log("cover is already hidden: now for the images");
      roll(index);
    };
  };

  function roll(index) {
    if (typeof index.imgs != "undefined") {
      console.log("called object has images")
      console.log("get them and their numbers")
      var imgs = index.imgs;
      var imgsLength = imgs.length;
      console.log("create as many divs as imgs, and place each img as bg in each div")
      for (var i = 0; i < imgsLength; i++) {
        $("#cover").append("<div class='imgdiv" + i + "'></div>");
        $(".imgdiv" + i).css("background-image", "url('" + imgs[i] + "')");
      };
      console.log("now hide all but first div, fadeIn cover and start the carousel");
      //as seen at http://snook.ca/archives/javascript/simplest-jquery-slideshow
      $('#cover').fadeIn(3000);
      $('#cover div:gt(0)').hide();
      interval = setInterval(function() {
        console.log("fade and swap")
        $('#cover :first-child').fadeOut(3000)
          .next('div').fadeIn(3000)
          .end().appendTo('#cover')
      }, 6000);
    } else {
      console.log("index has no images, nothing to do");
    };
  };

  $("#imgobj").click(function() {
    console.log("imgObject called");
    prepare(imgObject);
  });
  $("#imgobj2").click(function() {
    console.log("imgObject2 called");
    prepare(imgObject2);
  });
  $("#noimgobj").click(function() {
    console.log("noImgObject called");
    prepare(noImgObject);
  });

});

html {
  color: black;
  height: 100%;
  padding: 0;
  margin: 0;
  overflow: hidden;
}
body {
  height: 100%;
  padding: 0;
  margin: 0;
  background: #f7fafa;
}
* {
  box-sizing: border-box;
}
button {
  cursor: pointer;
}
#buttons {
  z-index: 1000;
}
#cover {
  display: none;
  position: fixed;
  top: 5vh;
  left: 0;
  width: 100vw;
  height: 95vh;
  opacity: 0.5;
  z-index: 0;
}
#cover div {
  position: absolute;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-repeat: no-repeat;
  background-size: cover;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<div id="buttons">
  <button id="imgobj">imgObject</button>
  <button id="imgobj2">imgObject2</button>
  <button id="noimgobj">noImgObject</button>
</div>
<div id="cover"></div>