如何实现容器内通知Div随机单次展示后自动停止？

你的需求很明确——要让每个通知卡片随机展示一次，全部展示完毕后自动停止，而不是无限循环重复。咱们可以通过维护一个待展示元素的队列来实现，每次从队列里随机挑一个展示，展示完就把它从队列里移除，直到队列空了就停止触发下一次展示。

下面是修改后的完整代码，我会一步步给你解释改动点：

HTML（保持不变） #

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

CSS（保持不变） #

.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;
}

JavaScript（核心修改部分） #

$(document).ready(function() {
  // 初始化待展示的通知元素数组，把所有.notification元素存进去
  let remainingNotifications = $('.notification').toArray();
  
  function showDiv() {
    if (remainingNotifications.length === 0) {
      // 如果没有剩余元素了，直接返回，不再继续触发下一次
      return;
    }
    
    // 从剩余数组里随机选一个索引
    const randomIndex = Math.floor(Math.random() * remainingNotifications.length);
    // 取出对应的元素
    const selectedNotification = $(remainingNotifications[randomIndex]);
    
    // 把选中的元素从剩余数组里移除（确保不会重复展示）
    remainingNotifications.splice(randomIndex, 1);
    
    // 执行动画逻辑
    selectedNotification.prependTo('.container').animate({
      opacity: 1,
      marginLeft: '30px'
    }, '100', 'swing').delay(3000).fadeOut(400);
    
    // 只有还有剩余元素时，才继续设置下一次定时器
    if (remainingNotifications.length > 0) {
      createRandomInterval();
    }
  }
  
  function createRandomInterval() {
    setTimeout(showDiv, 500 + Math.random() * 4000);
  }
  
  // 启动第一次展示
  createRandomInterval();
});

关键改动说明： #

1. 维护剩余元素队列：用remainingNotifications数组存储还没展示过的通知元素，初始时把所有.notification转成数组存进去。
2. 随机选择并移除：每次随机选数组里的一个元素，展示后用splice把它从数组里删掉，这样就不会被再次选中。
3. 停止条件判断：在showDiv开头检查数组长度，如果为空就直接返回，不再触发下一次定时器；动画完成后，也只有数组还有元素时才调用createRandomInterval。
4. 动画逻辑保留：你原来的动画效果完全保留，只是把操作对象改成了选中的单个元素，而不是随机选可能重复的元素。

这样修改后，所有通知会以随机顺序各展示一次，全部展示完就自动停止，完全符合你的需求~

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