Get random element from array, display it, and loop - but never followed by the same element

Question

I wrote a simple enough randomize function that loops through the elements in an array and displays them one after the other.

See it here.

function chang         


        

Answer 1

var whatAmI = ["Webdesigner", "Drummer", "Techie", "Linguistics student", "Photographer", "Geek", "Coder", "Belgian", "Batman", "Musician", "StackExchanger", "AI student"];

var prev = 1; //1 because "drummer" is the first array element displayed in the HTML

function getIndex(){
    var next = Math.floor(Math.random() * whatAmI.length);
    if(next==prev)
        return getIndex();
    else {
        prev = next;
        return next;
    }       
}

function changeSubTitle() {
    setTimeout(function () {
        $(".page-header > h2").animate({
            "opacity": 0
        }, 700, function () {
            $(this).text(whatAmI[getIndex()]);
            $(this).animate({
                "opacity": 1
            }, 700, changeSubTitle);
        });
    }, 1000);
}
changeSubTitle();

Try this method.

Answer 2

Stop upvoting please :-D

The following answer is better: https://stackoverflow.com/a/32395535/1636522. The extended discussion between me and Tim enlighten on why you should avoid using my solutions. My answer is only interesting from this point of view, hence, it does not deserve any upvote :-D

---

You could save the last integer and "while" until the next one is different:

var i, j, n = 10;
setInterval(function () {
  while ((j = Math.floor(Math.random() * n)) === i);
  document.write(j + ' ');
  i = j;
}, 1000);

Or even simpler, just add 1... :-D Modulo n to prevent index overflow:

var i, j, n = 10;
setInterval(function () {
  j = Math.floor(Math.random() * n);
  if (j === i) j = (j + 1) % n;
  document.write(j + ' ');
  i = j;
}, 1000);

First solution applied to your code:

var whatAmI = ["Webdesigner", "Drummer", "Techie", "Linguistics student", "Photographer", "Geek", "Coder", "Belgian", "Batman", "Musician", "StackExchanger", "AI student"];
var j;
var i = 1; // since you start with "Drummer"
var n = whatAmI.length;

function changeSubTitle() {
  setTimeout(function () {
    while ((j = Math.floor(Math.random() * n)) === i);
    $(".page-header > h2").animate({
      "opacity": 0
    }, 700, function () {
      $(this).text(whatAmI[j]);
      $(this).animate({
        "opacity": 1
      }, 700, changeSubTitle);
    });
  }, 1000);
  i = j;
}

changeSubTitle();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="page-header">
     <h1>Bananas</h1>
     <h2>Drummer</h2>
</header>

Answer 3

To give an even chance of all elements except the previous one being used do the following:

var i, j, n = 10;
setInterval(function () {
  // Subtract 1 from n since we are actually selecting from a smaller set
  j = Math.floor(Math.random() * (n-1)); 
  // if the number we just generated is equal to or greater than the previous
  // number then add one to move up past it
  if (j >= i) j += 1;
  document.write(j + ' ');
  i = j;
}, 1000);

The comments in the code should explain how this works. The key thing to remember is that you are actually selecting from 9 possible values, not from 10.

You should initialize i to be a random element in the array before starting.

For a simple walk through on a 3 element array with the second element selected:

i=1, n=3

The random result gives us either 0 or 1.

If it is 0 then j >= i returns false and we select element zero

If it is 1 then j >= i returns true and we select the third element.

You can do the same walk through with i being 0 and and i being 2 to see that it never overruns the buffer and always has an equal chance to select all other elements.

You can then extend that same logic to an array of any size. It works exactly the same way.