Javascript Don'；t一个接一个地在随机淡入/淡出中显示相同的div

我有一个JS，它从一个div“列表”中选择一个随机div，显示几秒钟，然后淡出，所有这些都在一个随机循环中

从逻辑上讲，有时直接一个接一个地选择同一个div。我想阻止这一切。最好的情况是，如果JS以随机顺序处理列表中的所有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();
});

---

这是我的全部任务：

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

像这样的

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

---

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

像这样的

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

---

将

random

保存到全局变量，如

lastDiv

。对照

lastDiv

检查

random

，如果它是匹配的，请重新运行该函数

var lastDiv；
函数showDiv（）{
var random=Math.floor（Math.random（）*$（'.notification'）.length）；
if（random==lastDiv）{
log（'随机匹配lastDiv，重新运行'）；
返回showDiv（）；
}
lastDiv=随机；
$（'.notification'）.eq（random）.prependTo（'.container'）.fadeIn（200）.delay（3000）.fadeOut（200）；
createRandomInterval（）；
}
函数createRandomInterval（）{
setTimeout（showDiv，500+Math.random（）*4000）；
}
$（文档）.ready（函数（）{
createRandomInterval（）；
});
。通知{
宽度：200px；
高度：50px；
背景颜色：黄色；
边框：1px实心rgba（0,0,0,0.2）；
边缘底部：5px；
文本对齐：居中；
填充顶部：20px；
显示：无；
/*最初隐藏，以便fadIn（）fadeOut（）可以工作*/
}

1.
2.
3.
4.
将
随机
保存到全局变量，如
lastDiv
。对照
lastDiv
检查
random
，如果它是匹配的，请重新运行该函数


var lastDiv；
函数showDiv（）{
var random=Math.floor（Math.random（）*$（'.notification'）.length）；
if（random==lastDiv）{
log（'随机匹配lastDiv，重新运行'）；
返回showDiv（）；
}
lastDiv=随机；
$（'.notification'）.eq（random）.prependTo（'.container'）.fadeIn（200）.delay（3000）.fadeOut（200）；
createRandomInterval（）；
}
函数createRandomInterval（）{
setTimeout（showDiv，500+Math.random（）*4000）；
}
$（文档）.ready（函数（）{
createRandomInterval（）；
});
。通知{
宽度：200px；
高度：50px；
背景颜色：黄色；
边框：1px实心rgba（0,0,0,0.2）；
边缘底部：5px；
文本对齐：居中；
填充顶部：20px；
显示：无；
/*最初隐藏，以便fadIn（）fadeOut（）可以工作*/
}

1.
2.
3.
4.
变量中的上一个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
如果不希望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;
}

您可能会发现这很有用您可能会发现这很有用@EleazarEnrique，在获取与上一个索引不匹配的索引之前，您的不也包括调用
getRandom（）
太多次吗？你把东西分成两个函数，而我在函数不满足条件时停止函数执行。但是当我运行你的示例时，相同的div仍然一个接一个地显示。例如，分区“3”，其中直接显示3次：/@EleazarEnrique，在获取与上一个索引不匹配的索引之前，您的索引不也包括调用
getRandom（）
太多次吗？你把东西分成两个函数，而我在函数不满足条件时停止函数执行。但是当我运行你的示例时，相同的div仍然一个接一个地显示。例如，分区“3”，其中直接显示3次：/嗯，我在小提琴上试过了——但同一个div仍然一个接一个地播放。有时他们只是眨眼，有时新的出现在第一个位置：/Hmm，我在小提琴上试过了-但同一个div仍然一个接一个地出现。有时他们只是眨眼，有时第一个位置出现新的：/嘿，首先谢谢！我把它放在一把小提琴里：-现在发生的是，有时同一个div会立即消失和消失，因此在div上会出现类似闪烁的效果。我们如何避免这种情况，并确保如果显示了div“5”，函数会在再次选择“5”之前先选择其他div？您好，您必须将阵列中可见的项目放入阵列中，当其淡出时，将其从阵列中移除。这样，在do..while循环中，您将检查所选项目是否在arrayHey中，首先谢谢！我把它放在一把小提琴里：-现在发生的是，有时同一个div会立即消失和消失，因此在div上会出现类似闪烁的效果。我们如何避免这种情况，并确保如果显示了div“5”，函数会在再次选择“5”之前先选择其他div？您好，您必须将阵列中可见的项目放入阵列中，当其淡出时，将其从阵列中移除。这样，在do..while循环中，您将检查所选项目是否在数组中