Show random div with delay on loop

Question

I have got so far with this but as I am relatively new to JavaScript have soon become quite stuck. I would like to randomly show a div that fades in, if visible for 5 seconds and then fades out. There should then be a 10 second delay before the next random div appears. Ideally no two divs should show back to back.

If possible could the delay between showing one then another be random between 10-20 seconds?

$(".demoBooked").fadeIn(2000).delay(5000).fadeOut(1000);

body {
  padding: 50px;
}

.demoBooked {
  background: GOLD;
  padding: 20px;
  border-radius: 3px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p class="demoBooked">Demo 01</p>
<p class="demoBooked">Demo 02</p>
<p class="demoBooked">Demo 03</p>
<p class="demoBooked">Demo 04</p>
<p class="demoBooked">Demo 05</p>
<p class="demoBooked">Demo 06</p>
<p class="demoBooked">Demo 07</p>
<p class="demoBooked">Demo 08</p>
<p class="demoBooked">Demo 09</p>
<p class="demoBooked">Demo 10</p>

score 2 · Accepted Answer · answered Dec 16 '20 at 16:39

I would use a shuffle algorithm against the array with a queue. When the item is done fading out, you take the next item off the list. When you runout, shuffle the array again or just stop it.

function shuffle(array) {
  var currentIndex = array.length,
    temporaryValue, randomIndex;

  // While there remain elements to shuffle...
  while (0 !== currentIndex) {

    // Pick a remaining element...
    randomIndex = Math.floor(Math.random() * currentIndex);
    currentIndex -= 1;

    // And swap it with the current element.
    temporaryValue = array[currentIndex];
    array[currentIndex] = array[randomIndex];
    array[randomIndex] = temporaryValue;
  }

  return array;
}

var queue = [];

function setUp() {
  var elems = $(".demoBooked").get();
  queue = shuffle(elems);
  showNext();
}

function showNext() {
  var elem = queue.pop();
  if (elem) {
    $(elem)
      .fadeIn(2000)
      .delay(5000)
      .fadeOut(1000, showNext);
  } else {
    setUp();
  }
}

setUp();

body {
  padding: 50px;
}

.demoBooked {
  background: GOLD;
  padding: 20px;
  border-radius: 3px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p class="demoBooked">Demo 01</p>
<p class="demoBooked">Demo 02</p>
<p class="demoBooked">Demo 03</p>
<p class="demoBooked">Demo 04</p>
<p class="demoBooked">Demo 05</p>
<p class="demoBooked">Demo 06</p>
<p class="demoBooked">Demo 07</p>
<p class="demoBooked">Demo 08</p>
<p class="demoBooked">Demo 09</p>
<p class="demoBooked">Demo 10</p>

Thank you for this! Is there a way to add a delay between showing a new one? At the moment the next div shows instantly, can we wait 10 seconds before showing another? — OGDigital, Dec 16 '20 at 16:46
So add a timeout `.fadeOut(1000, function(){ setTimeout(showNext,2000); });` — epascarello, Dec 16 '20 at 16:51

plop · Answer 2 · 2020-12-16T17:00:35.937

0

from what I get, you want a random <p> every time? here

setInterval(() => {
 // generate a random number
 var randomNum = Math.floor(Math.random() * 10);

 // show the random .demoBooked
 $(document.querySelectorAll('.demoBooked')[randomNum]).fadeIn(2000).delay(5000).fadeOut(1000);
}, 10000);

(you just need JS for this)

edited Dec 16 '20 at 17:00

answered Dec 16 '20 at 16:46

plop

88
7

Kind of, so the showing of the div is correct, however, I would like them to fade in/out but also have a 10 second delay between each one showing. For example: Page Loads Div fades in & shows for 5 seconds, then fades out 10 second delay process repeats – OGDigital Dec 16 '20 at 16:52

s.kuznetsov · Answer 3 · 2020-12-16T17:19:49.623

And this is my solution using setInterval().

function show() {
let p_length = $('.demoBooked').length;
let p_random = Math.floor(Math.random() * p_length);
$('.demoBooked').eq(p_random).fadeIn(2000).delay(5000).fadeOut(1000);
}

show();
setInterval(show, 10000);

body {
  padding: 50px;
}

.demoBooked {
  background: GOLD;
  padding: 20px;
  border-radius: 3px;
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<p class="demoBooked">Demo 01</p>
<p class="demoBooked">Demo 02</p>
<p class="demoBooked">Demo 03</p>
<p class="demoBooked">Demo 04</p>
<p class="demoBooked">Demo 05</p>
<p class="demoBooked">Demo 06</p>
<p class="demoBooked">Demo 07</p>
<p class="demoBooked">Demo 08</p>
<p class="demoBooked">Demo 09</p>
<p class="demoBooked">Demo 10</p>

Show random div with delay on loop

3 Answers3