jquery fadeIn/Out, custom slideshow glitches, fade memory? fade queue?

I am building a background img slideshow and running into glitches I can't comprehend.

I have several objects that contains a list of images. I have two functions that will take these images, create one div per each, and add the imgs as background of these divs, all within a container.

Then, as described in this website, I fadeout the first div,and fadeIn the second, then move the first child to last child position, and loop, creating a slideshow effect.

When I want this over i .empty() the container. Then the process can start again with the same or another object.

The first time I do this, it works, but second, third... times, it starts to glitch. Not only two, but all divs start to fade in and out, for I don't know what reason

This happens even if I am using the same object in the first, second, third... attempts.

It would seem as if although the divs are erased from DOM, apparently there is some memory of them? Could it be related to the fact that created divs share the name with previously created divs? maybe fadein out keep some kind of internal queue I am unaware of?

Here is an JsFiddle:

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

and the code:

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

});

Thank you

Solution

Every time click event is invoked, another interval is being started and that is the reason, actions are appended in the queue

Use global variable which will hold the setInterval instance and clear it every time you start new Interval.

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>