Javascript jquery淡出/淡出、自定义幻灯片放映故障、淡出内存？淡出队列？

我正在制作一个背景img幻灯片，遇到了我无法理解的小故障

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

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

当我想要这个的时候，我就把容器清空。然后，该过程可以从同一个或另一个对象重新开始

我第一次这样做，它是有效的，但第二次，第三次。。。有时，它开始出现故障。不只是两个，所有的女主角都开始淡入淡出，我不知道是什么原因

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

看起来好像虽然div从DOM中被删除了，但是很明显，有一些div的内存吗？这可能与创建的div与以前创建的div共享名称有关吗？也许fadein out保留了某种我不知道的内部队列

下面是一个JSFIDLE：

以及守则：

$(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);
});

});

$（文档）.ready（函数（）{
变量imgObject={
imgs:['http://lorempixel.com/400/200/sports/1/','http://lorempixel.com/400/200/sports/2/','http://lorempixel.com/400/200/sports/3/']
};
变量imgObject2={
imgs:['http://lorempixel.com/400/200/sports/4/','http://lorempixel.com/400/200/sports/5/','http://lorempixel.com/400/200/sports/6/']
};
变量noImgObject={
};
功能准备（索引）{
如果（$（“#封面”）.css（“显示”）！=“无”）{
log（“封面可见：先隐藏”）；
控制台日志（“3000ms内淡出盖”）；
$（“#封面”）。淡出（3000，功能（）{
console.log（“然后是空盖”）
$（“#封面”）.empty（）；
log（“现在查看图像”）
卷（索引）；
});
}否则{
log（“封面已经隐藏：现在用于图像”）；
卷（索引）；
};
};
功能辊（索引）{
if（typeof index.imgs！=“未定义”）{
log（“被调用对象具有图像”）
log（“获取他们和他们的号码”）
var imgs=index.imgs；
var imgsLength=imgs.length；
log（“创建尽可能多的div作为img，并将每个img作为bg放置在每个div中”）
对于（i=0；i

多谢各位

每次调用

click

事件时，都会启动另一个间隔，这就是原因，操作会追加到

队列中

使用

global

变量，该变量将在每次启动新间隔时保存

setInterval

实例并清除它

var区间；
$（文档）.ready（函数（）{
变量imgObject={
imgs:['http://lorempixel.com/400/200/sports/1/', 'http://lorempixel.com/400/200/sports/2/', 'http://lorempixel.com/400/200/sports/3/']
};
变量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={}；
功能准备（索引）{
间隔时间；
如果（$（“#封面”）.css（“显示”）！=“无”）{
log（“封面可见：先隐藏”）；
控制台日志（“3000ms内淡出盖”）；
$（“#封面”）。淡出（3000，功能（）{
console.log（“然后是空盖”）
$（“#封面”）.empty（）；
log（“现在查看图像”）
卷（索引）；
});
}否则{
log（“封面已经隐藏：现在用于图像”）；
卷（索引）；
};
};
功能辊（索引）{
if（typeof index.imgs！=“未定义”）{
log（“被调用对象具有图像”）
log（“获取他们和他们的号码”）
var imgs=index.imgs；
var imgsLength=imgs.length；
log（“创建尽可能多的div作为img，并将每个img作为bg放置在每个div中”）
对于（变量i=0；i
html{
颜色：黑色；
身高：100%；
填充：0；
保证金：0；
o