2014-06-25 41 views
1

我正在学习javascript,我正在尝试做一个练习,每半秒一个标题的字体将发生变化。我得到了这个工作,但每隔一段时间它就会重复选择相同的阵列号。这使交换机看起来像暂停了。这里是我的代码到目前为止:随机选择数组中的字体,不要重复

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

你会将数字变量推到一个数组,然后用if语句检查它吗?尝试过,但无法弄清楚。任何帮助真的很感激!

+2

使用另一个变量来存储先前的值,并将其与新的数字进行比较,如果匹配,再次调用该函数使用其他字体,并设置这个数字在变量下一次运行。 – Fr0zenFyr

回答

2

could shuffle the 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); 
+0

这里的缺点是,只是混洗不能确保一个数组的最后一个元素与下一个元素的最后一个元素不同(导致重复) –

0

如果要数变量推到一个数组,你有推前要检查它while循环。不知怎的,像这样:

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); 
0

这是罕见的情况下,一个do...while循环实际上是最好的选择之一。此代码记录用于每次迭代的index,并且如果新随机索引与前一个相同,它将选取一个新的随机数。它是这样做的,直到条件中断为止,即新的index和之前的index不相同。

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