如何避免随机淡入淡出循环中连续显示同一div？

嘿，刚好能解决你的问题！你想要的是让所有.notification div按随机顺序完整遍历一遍后再开启下一轮，完全避免连续选中同一个元素的情况，对吧？核心思路是维护一个打乱顺序的待展示队列，每次从队列头部取元素显示，等队列清空后再重新打乱生成新队列，这样既保证了随机性，又不会出现连续重复的问题。

下面是修改后的完整代码：

var myVar;
// 初始化待展示的队列，以及洗牌函数
function shuffleArray(array) {
  // Fisher-Yates 洗牌算法，高效且公平地打乱数组
  for (let i = array.length - 1; i > 0; i--) {
    const j = Math.floor(Math.random() * (i + 1));
    [array[i], array[j]] = [array[j], array[i]];
  }
  return array;
}

let displayQueue = [];
function initQueue() {
  // 把所有notification元素的索引存入数组，然后洗牌
  const indices = Array.from({length: $('.notification').length}, (_, i) => i);
  displayQueue = shuffleArray(indices);
}

function showDiv() {
  // 如果队列空了，重新初始化队列（开启新一轮随机遍历）
  if (displayQueue.length === 0) {
    initQueue();
  }
  // 从队列头部取出下一个要显示的索引
  const nextIndex = displayQueue.shift();
  // 执行你原来的显示逻辑
  $('.notification').eq(nextIndex).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  // 保持原来的随机间隔逻辑
  createRandomInterval();
}

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

$(document).ready(function() {
  // 页面加载时初始化队列
  initQueue();
  createRandomInterval();
});

关键逻辑说明： #

• Fisher-Yates洗牌算法：这是业界常用的公平洗牌方式，能确保每个元素的位置都是随机且等概率的，比简单的sort(() => Math.random() - 0.5)更可靠。
• 队列维护：每次从队列头部取出元素，避免重复；当队列清空时，重新生成打乱后的队列，实现“遍历完所有元素再开启新一轮”的需求。
• 保留原有效果：完全保留了你原来的prependTo、淡入淡出动画以及随机间隔时间的逻辑，只修改了选择元素的方式。

这样修改后，就再也不会出现连续显示同一个div的情况了，而且每一轮的显示顺序都是随机的，完全符合你的需求！

内容的提问来源于stack exchange，提问作者Referee Andy