Question

我有一小段Javascript，我从头到尾按顺序轮换引号列表。

但是，我想随机浏览列表（而不是按顺序），不重复直到所有引号都被迭代，然后再次使用随机引号。我该怎么做呢？

$(function(){
    var quotes = $('#quotes').children('.rotate-quote');
    firstQuo = quotes.filter(':first');
    lastQuo = quotes.filter(':last');
    quotes.first().show();
    setInterval(function(){
        if($(lastQuo).is(':visible')) {
            var nextElem = $(firstQuo);
        } else {
            var nextElem = $(quotes).filter(':visible').next();
        }
        $(quotes).filter(':visible').fadeOut(300);
        if($(lastQuo).is(':visible')) {
            setTimeout(function() {
                $(firstQuo).fadeIn(300);
            }, 600);

        } else {
            setTimeout(function() {
                $(nextElem).fadeIn(600);
            }, 600);
        }
    }, 10000);
});

Answer 1

这是一个可能的演示解决方案：

var $container = $('div'),
    quotes = $('quote').hide().toArray(),
    delay = 500;

function shuffle(arr) {
  return arr.map(function(v){ return [v,Math.random()]; })
    .sort().map(function(v){ return v[0]; });
}

function loop() {
  $(shuffle(quotes)).each(function(i,el) {
    setTimeout(function(){ $(el).appendTo($container).show(); }, i*delay);
  });
}

function start() {
  function begin(){ $(quotes).hide(); loop(); }
  setInterval(begin, quotes.length * delay);
  begin();
}

start();

演示： http://jsbin.com/agihix/1/edit

修改：我把它变成了一个小插件，抓住它https://gist.github.com/elclanrs/5610886

Answer 2

只是为了展示Fisher Yates（不是我的代码）：

function fisherYates ( myArray ) {
  var i = myArray.length, j, temp;
  if ( i === 0 ) return false;
  while ( --i ) {
     j = Math.floor( Math.random() * ( i + 1 ) );
     temp = myArray[i];
     myArray[i] = myArray[j]; 
     myArray[j] = temp;
  }
  return myArray;
}

所以把你的引号放到一个数组中，通过该函数运行它，然后循环遍历数组，当你到达最后，再次通过该函数运行它等等。

Answer 3

以下复制引用数组，然后每次从中随机切片。如果没有剩下的条目，它会重新开始。

var randomQuote = (function() {
  var quotes = ['quote 0','quote 1','quote 2'];
  var quoteCopy = [];

  return function () {
    if (!quoteCopy.length) {
      quoteCopy = quotes.slice();
    }
    return quoteCopy.splice(Math.random()*quoteCopy.length | 0, 1)[0];
  }
}());

Answer 4

我不认为你所说的算法是好的。假设您有100个引号，然后您对整个集进行第一次随机演示。

最后，如您的描述中所述，将从头开始，因此报价101可能与100相同的报价。

我认为更好（更均匀）的东西将是

随机随机播放n引号。这只在开始时进行一次。
选择第一个引号并显示它。
从列表中删除引号，并将其插入n-w和n之间的随机位置，其中w是参数（例如n/2）。
为您需要的每个报价重复2次。

数字w将调整您希望序列的随机数量......呈现报价后延迟越小且延迟越均匀。

采用这种方法不会出现“分布故障”，下次提出报价后的平均延迟将不会取决于当前的位置。

如何随机浏览未知数量的引号而不重复

4 个答案: