显示一次容器中的随机 div

Question

我想做一些类似通知消息的事情。

首先，我实现了一个无限循环，但这并不完美，所以我只想以随机顺序显示容器的每个div。当显示容器的所有div 时，它应该简单地停止。

但我不知道，如何设置类似列表的东西，它应该是随机处理然后停止的。

这是我的代码：

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>

这是我的小提琴：https://jsfiddle.net/brapbg1h/6/

非常感谢！

Answer 1

我认为这就是你要找的：

只需将您的元素存储在数组中，并在附加它们后从中删除它们

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>

编辑根据 OP 的要求更改了代码段

Answer 2

维护一个数组，然后查找访问过的节点

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

这是修改后的示例