Avoid displaying the identical div through consecutive random fade-ins and fade-outs

Question

Avoid displaying the identical div through consecutive random fade-ins and fade-outs

I'm trying to make a JavaScript function that selects a random div from a list of divs, displays it for a few seconds, fades it out, and repeats this process in a loop. The issue I'm facing is that sometimes the same div is selected consecutively. I want to avoid this by ensuring that all divs are processed in a random order before starting a new round. For example, div number 5 should not be shown immediately after being displayed.

Below is the current JavaScript code:

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

You can view the complete fiddle here: https://jsfiddle.net/brapbg1h/

javascript jquery css

Answer 1

Answer №1

To optimize the process, I would suggest storing the previous result and reprocessing if it lands on the same one again.

Here is a sample implementation:

let previousResult = -1;

function retrieveRandom() {
  const result = Math.floor(Math.random() * $('.message').length);
  return result === previousResult ? retrieveRandom() : result;
}

function displayMessage() {
  let randomIndex = retrieveRandom();
  previousResult = randomIndex;
  $('.message').eq(randomIndex).prependTo('.box').fadeIn(200).delay(3000).fadeOut(200);
}

Answer 2

To optimize the process, I would suggest storing the previous result and reprocessing if it lands on the same one again.

Here is a sample implementation:

let previousResult = -1;

function retrieveRandom() {
  const result = Math.floor(Math.random() * $('.message').length);
  return result === previousResult ? retrieveRandom() : result;
}

function displayMessage() {
  let randomIndex = retrieveRandom();
  previousResult = randomIndex;
  $('.message').eq(randomIndex).prependTo('.box').fadeIn(200).delay(3000).fadeOut(200);
}

Answer 3

Answer №2

Store the value of random in a global variable called lastDiv. Compare random with lastDiv, and if they match, run the function again.

var lastDiv;

function showDiv() {
 
  var random = Math.floor(Math.random() * $('.notification').length);
  
  if(random == lastDiv) {
    console.log('random matches lastDiv, re-running.');
    return showDiv();
  }
  
  lastDiv = random;
  
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

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

.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;
  display: none;
  /* initially hide to enable fadeIn() and fadeOut() effects */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>

Answer 4

Store the value of random in a global variable called lastDiv. Compare random with lastDiv, and if they match, run the function again.

var lastDiv;

function showDiv() {
 
  var random = Math.floor(Math.random() * $('.notification').length);
  
  if(random == lastDiv) {
    console.log('random matches lastDiv, re-running.');
    return showDiv();
  }
  
  lastDiv = random;
  
  $('.notification').eq(random).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
  createRandomInterval();
}

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

.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;
  display: none;
  /* initially hide to enable fadeIn() and fadeOut() effects */
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/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>

Answer 5

Answer №3

Store the Previous Div in a Variable

To ensure that consecutive divs are not the same, you can save the number of the previous div in a variable. If this number matches the current selection, simply rerun the function within a do..while loop.

var randomNumber;

function displayDiv() {
    do {
        var randomNumber = Math.floor(Math.random() * $('.notification').length);
    } while(randomNumber == previousDivIndex);
  
    $('.notification').eq(randomNumber).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
    createRandomInterval();

    var previousDivIndex = randomNumber;
}

Answer 6

Store the Previous Div in a Variable

To ensure that consecutive divs are not the same, you can save the number of the previous div in a variable. If this number matches the current selection, simply rerun the function within a do..while loop.

var randomNumber;

function displayDiv() {
    do {
        var randomNumber = Math.floor(Math.random() * $('.notification').length);
    } while(randomNumber == previousDivIndex);
  
    $('.notification').eq(randomNumber).prependTo('.container').fadeIn(200).delay(3000).fadeOut(200);
    createRandomInterval();

    var previousDivIndex = randomNumber;
}

Avoid displaying the identical div through consecutive random fade-ins and fade-outs

Answer №1

Answer №2

Answer №3

Store the Previous Div in a Variable

Similar questions

Having trouble with a basic node.js server test - no results being shown

Creating a radial progress chart using Plotly JavaScript

Learn the steps for showcasing user information in a tabular layout by utilizing session management with node.js, react.js, and SQL

Guide to vertically aligning text within a row using Bootstrap 5

Pause file uploads, display modal popup, then resume uploading

What happens when we add Cookies and JavaScript together? Let's find out with

Guide on adding a post type via the command line: Issue encountered - Anticipated POST console HTML error

Web page layout featuring fields set aside for completion with underlined formatting

Is it feasible to make Twitter's Typeahead plugin have an initial slide down or fade in effect?

Incorporating new elements into a slideshow using jQuery post-load event

Unable to locate the JSON file in the req.body after sending it through an HTTP post request

Approval still pending, awaiting response

A challenge in web design: tackling cross-browser color discrepancies

Events bound to JSX elements created in an array map are not being triggered by React

Is there a way to shift this modal to the right?

Loop through the array only if the property exists to avoid encountering the 'cannot iterate over undefined' error

Enhance the functionality of Javascript Promise.then by allowing the argument function to accept an extra parameter

How to prevent labels from overlapping textboxes when the labels are lengthy using CSS

Is your preference selecting made a breeze by dragging the input field?

Botkit corner flaw