需求：实现随机无重复依次展示字符串并支持可配置延迟

Great question! Your original code handles sequential display nicely, but to achieve random, non-repeating reveals with adjustable timing, we can refactor it to use a reliable shuffle algorithm and make timing fully configurable. Here's a polished, self-contained solution that cuts unnecessary third-party dependencies and checks all your boxes:

Full Working Code #

HTML #

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="slideShow">
  <p>This is my first line</p>
  <p>Here goes my second line</p>
  <p>Then comes third line</p>
  <p>Following to that fourth line</p>
  <p>And finally here goes my fifth line</p>
</div>

CSS #

#slideShow p { 
  display: none; 
  color: #666; /* Muted default for hidden slides */
}
#slideShow p.active { 
  color: #000; /* Bold color for active visible slide */
}

JavaScript #

$(document).ready(function() {
  // Easily adjustable configuration values
  const delayBetweenSlides = 200; // Delay before each slide starts (ms)
  const fadeInDuration = 2000; // Length of the fade animation (ms)

  // Grab all slide elements and convert to a mutable array
  const slides = $("#slideShow p").toArray();
  
  // Fisher-Yates Shuffle - the most unbiased way to randomize an array
  function shuffleArray(array) {
    for (let i = array.length - 1; i > 0; i--) {
      const randomIndex = Math.floor(Math.random() * (i + 1));
      // Swap elements
      [array[i], array[randomIndex]] = [array[randomIndex], array[i]];
    }
    return array;
  }

  // Shuffle the slides to get our random order
  const shuffledSlides = shuffleArray(slides);

  // Animate each slide in the shuffled sequence
  shuffledSlides.forEach((slide, index) => {
    $(slide)
      .delay(delayBetweenSlides * index)
      .fadeIn(fadeInDuration, function() {
        // Reset active state on all slides
        $(shuffledSlides).not(this).removeClass("active");
        // Mark current slide as active
        $(this).addClass("active");
      });
  });
});

Key Improvements & Breakdown #

• True Random Non-Repeating Order: We use the Fisher-Yates shuffle to reorder slides. This algorithm ensures every permutation is equally likely, so you’ll never get repeated sequences or biased randomness.
• Configurable Timing: The top-level variables delayBetweenSlides and fadeInDuration let you tweak timing without digging into animation logic.
• No External Plugins: We removed the dependency on jquery.fadeInAmate.js and used jQuery’s native fadeIn() method—more reliable and reduces maintenance overhead.
• Clean State Management: The active class clearly marks the visible slide, making CSS intent obvious and easier to modify later.
• Error Prevention: Wrapping code in $(document).ready() ensures we only run logic after all elements are loaded, avoiding "element not found" errors.

How It Runs #

1. Collect & Shuffle: We gather all slides into an array, then shuffle it to get our random display order.
2. Sequence Animations: Each slide starts fading in after a calculated delay (based on its position in the shuffled list).
3. Update Active State: When a slide finishes fading in, we remove the active class from all other slides and apply it to the current one, ensuring only the visible slide has the bold color.

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