变量

Question

我有一个JS从一个＆＃34;列表＆＃34;中选择一个随机div。 divs，显示它几秒钟并将其淡出，所有这些都是随机循环的。

现在逻辑上，有时候一个接一个地直接挑选相同的div。我想阻止这个。最好的情况是，如果JS将以随机顺序处理列表中的所有div，那么它将开始一个新的随机＆＃34; round＆＃34;。所以例如div没有。 5将不会再次直接显示在另一个之后。

这是我的JS：

var myVar;

function showDiv() {
  var random = Math.floor(Math.random() * $('.notification').length);
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

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

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

Answer 1

我要做的是存储最后的结果，如果它落在上面，那么再次处理。

像这样的事情。

let lastResult = -1;

function getRandom() {
  const res = Math.floor(Math.random() * $('.notification').length);
  return res === lastResult ? getRandom() : res;
}

function showDiv() {
  var random = getRandom();
  lastResult = random;
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

Answer 2

将random保存到全局变量，例如lastDiv。检查random对lastDiv是否匹配，再次重新运行该功能。

var lastDiv;

function showDiv() {
 
  var random = Math.floor(Math.random() * $('.notification').length);
  
  if(random == lastDiv) {
    console.log('random matches lastDiv, re-running.');
    return showDiv();
  }
  
  lastDiv = random;
  
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  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;
  display: none;
  /* hide initially so that fadIn() fadeOut() will work */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>

Answer 3

变量

中的上一个Div

如果您不希望2 结果 div相同，只需将div的编号（因为它来自列表）分配给变量，如果它等于当前选择运行该函数在do..while循环中再次出现。

var random;

function showDiv() {
    do {
        var random = Math.floor(Math.random() * $('.notification').length);
    } while(random==previousDiv);
    $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
    createRandomInterval();

    var previousDiv = random;
}

不要一个接一个地随机淡入/淡出显示相同的div

3 个答案:

变量