Randomly choose font out of array and don't repeat

Question

I'm learning javascript and I'm trying to do an exercise where every half second a header's font will change. I got that working, but every one and awhile it will pick the same array number back to back. This makes the switch look like it paused. Here is my code so far:

var myFont = [ "times", "helvetica", "verdana", "georgia"];
setInterval(function(){ 
    number = Math.floor(Math.random() * myFont.length); 
    document.getElementById('hi').style.fontFamily = myFont[number];
}, 500);

Would you push the number variable to an array then check it with an if statement? Tried it but couldn't quite figure it out. Any help is really appreciated!

use another variable to store previous value and compare it with new number, if it matches, call the function again else use the font and set this number in variable for next run. — Fr0zenFyr, Jun 25 '14 at 07:33

score 1 · Accepted Answer · edited May 23 '17 at 11:57

1

You could shuffle the array first and then iterate over the random sorted array.

shuffle( myFont ).forEach( function( i ) {
    document.getElementById('hi').style.fontFamily = myFont[i];
} );

/* or using an interval */
var i = 0,
    stop = myFont.length;
setInterval( function(){
    document.getElementById('hi').style.fontFamily = myFont[i];
    if( i == stop ) {
        i = 0;
    }
    else {
        i++;
    }
}, 500);

edited May 23 '17 at 11:57

Community

1
1

answered Jun 25 '14 at 07:37

feeela

29,399
7
59
71

The flaw here is that just shuffling doesn't ensure the last element of one array isn't the same as the first element of the next (causing a repeat) – Patrick Gunderson Jun 25 '14 at 07:52

score 0 · Answer 2 · answered Jun 25 '14 at 07:48

If you want to push the number variable to an array you have to check it in while loop before pushing. Somehow like this:

var myFont = [ "times", "helvetica", "verdana", "georgia"];
var indices = [];
setInterval(function(){
    var number;
    while (myFont.indexOf(number = Math.floor(Math.random() * myFont.length)) >= 0);
    indices.push(number);
    document.getElementById('hi').style.fontFamily = myFont[number];
}, 500);

score 0 · Answer 3 · answered Jun 25 '14 at 07:49

Here is one of the rare cases where a do...while loop is actually the best option. This code records the index used for each iteration, and if the new random index is the same as the previous one, it picks a new random number. It does this until the condition breaks, i.e. the new index and the previous index aren't the same.

http://jsfiddle.net/u5b2K/

//create a collection
var myFont = [ "times", "helvetica", "verdana", "georgia"];
//record the last index used
var lastIndex;
setInterval(function(){ 
    //pick a random number within the collection's range
    // make sure it's not the same as the last one used
    //using do...while ensures the loop runs once before evaluating the condition
    do{
        index = Math.floor(Math.random() * myFont.length);
    } while(lastIndex === index);
    // record the font used
    lastIndex = index;
    //set the font
    document.getElementById('hi').style.fontFamily = myFont[index];

}, 500);

Randomly choose font out of array and don't repeat

3 Answers3