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

我认为这正是您所寻找的：

只需将元素存储在数组中，然后在添加元素后将其删除

＆＃13;

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()

＆＃13;

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

＆＃13;

<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>

＆＃13;

修改按照操作

的要求更改了代码段

Answer 2

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

 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

一次从容器中显示随机div

2 个答案: