javascript - 如何在不重复的情况下随机浏览未知数量的报价

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