Show a random div of from a container one time

Question

I want to do something like notification messages.

First I implemented an infinite loop, but this is not working perfect, so I just want to show every div of the container one time in a random order. When all divs of the container where shown, it should simply stop.

But I don't know, how the set something like a list, which should be process randomly and then stop.

Here is my CODE:

var myVar;

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).prependTo('.container').animate({
    opacity: 1, // animate slideUp
    marginLeft: '30px'
  }, '100', 'swing').delay(3000).fadeOut(400);
  createRandomInterval();
}

function createRandomInterval() {
  setTimeout(showDiv, 500 + Math.random() * 4000);
}
$(document).ready(function() {
  createRandomInterval();
});

.notification {
  width: 200px;
  height: 50px;
  background-color: yellow;
  border: 1px solid rgba(0, 0, 0, 0.2);
  margin-bottom: 5px;
  text-align: center;
  padding-top: 20px;
  opacity: 0;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
  <div class="notification">1</div>
  <div class="notification">2</div>
  <div class="notification">3</div>
  <div class="notification">4</div>
  <div class="notification">5</div>
  <div class="notification">6</div>
  <div class="notification">7</div>
  <div class="notification">8</div>
  <div class="notification">9</div>
  <div class="notification">10</div>
</div>

Here is my fiddle: https://jsfiddle.net/brapbg1h/6/

Thank you so much!

Answer 1

I think this is what You're looking for:

Simply store your elements in an array and delete them from it once you've appended them

var arr = $(".notification");

function display(){
    let rand = Math.floor(Math.random() * arr.length)
    arr.eq(rand).prependTo("#result").animate({
      opacity: 1, // animate slideUp
      marginLeft: '30px'
    }, '100', 'swing').delay(2000).fadeOut(400);
    arr = arr.not(":eq("+rand+")")
    if(arr.length>0) createRandomInterval();
}



function createRandomInterval() {
    setTimeout(display, 500 + Math.random() * 4000);
}
createRandomInterval()

.notification {
  background-color: red;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 50px;
  width: 200px;
  margin-bottom: 10px;
  opacity: 0
}

.hidden {
  display: none;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="hidden">
  <div class="notification">object 1</div>
  <div class="notification">object 2</div>
  <div class="notification">object 3</div>
  <div class="notification">object 4</div>
</div>
<div id="result"></div>

edit changed the snippet as requested by op

Answer 2

Maintain an array and then look for visited node

 for ( i in $('.notification') ) {
   if (arr.length ===  $('.notification').length) {
      console.log("all are shown")
    } else {  
        setInterval(showDiv, 500 + Math.random() * 4000);
    }
  }

Here is the modified example