Question

我有一个文本数组，它在一个设定的时间间隔内带有淡入淡出并随机化（see my website）。问题在于我希望数组进行混洗，以便在所有数组循环完成之前，所有文本都不会重复。我尝试在数组之后直接添加textArray.shuffle();（在多个其他解决方案中），但到目前为止，shuffle要么没有效果要么完全杀死脚本。

以下是我的整个剧本：

$(document).ready( function() {
    var textArray = [
        'Hello! I\'m Zac. I\'m allergic to pineapples, gum, and woolly bear caterpillars. And Comic Sans.',
        'Hello! I\'m Zac. I love Apple products.',
        'Hello! I\'m Zac. I have touched the North, East, West, and South coasts of the USA.',
        'Hello! I\'m Zac. I\'m a designer.',
        'Hello! I\'m Zac. I lived in Minnesota for 20 years. I\'ve lived in Ohio for 2 and a half.',
        'Hello! I\'m Zac. Two of my favorite artists are Shepard Fairey and Banksy.',
        'Hello! I\'m Zac. Bettendorf (my last name) is also the name of one of the Quad Cities.',
        'Hello! I\'m Zac. My high school graduating class consisted of just 36 people.',
        'Hello! I\'m Zac. My closet is arranged by hue, saturation, and luminosity.',
        'Hello! I\'m Zac. I\'m a visual artist.',
        'Hello! I\'m Zac. I\'m a Minnesota native.',
        'Hello! I\'m Zac. The servers that host this website are 100% wind powered.'
        ];
    textArray.shuffle();

    $('#text-content').loadText( textArray, 6000 ); // ( array, interval )
});

// custom jquery plugin loadText()
$.fn.loadText = function( textArray, interval ) {
    return this.each( function() {
        var obj = $(this);
        obj.fadeOut( 'slow', function() {
            obj.empty().html( random_array( textArray ) );
            obj.fadeIn( 'slow' );
        });
        timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
        // reload random text (if not animated) -- entirely optional, can be removed, along with the reload link above (<a href="javascript:;" id="text-reload"><em>randomize</em></a>)
        $("#text-reload").click( function(){
            if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray, interval );} // animation check prevents "too much recursion" error in jQuery
        });
    });
}
//public function
function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
}

Answer 1

我不知道javascript中内置的shuffle函数，这就是textArray.shuffle（）导致代码失败的原因。您可以使用sort函数实现shuffle。您只需要传递sort，这是一个随机返回正数或负数的函数。

以下是应该对您的数组进行随机播放的代码。

textArray.sort(function() {return 0.5 - Math.random()})

这应该会产生你想要的效果。

Answer 2

你可以写一个数组shuffle。

演示：http://jsfiddle.net/lucuma/RPw9X/

Array.prototype.shuffle = function() {
    var s = [];
    while (this.length) s.push(this.splice(Math.random() * this.length, 1)[0]);
    while (s.length) this.push(s.pop());
    return this;
}

Answer 3

我肯定会采用不同的方法：

var RandomArray = function(myArray) {
  var
  currentArray = [],
  originalArray = myArray.slice(0);

  // Shuffle the array
  var shuffle = function() {
      var tmpArray = originalArray.slice(0);
      while(tmpArray.length) {
        var idx = Math.floor(Math.random() * tmpArray.length);
        currentArray.push(tmpArray.splice(idx, 1)[0]);
      }
  };

  // Get the next element
  this.next = function() {
    if(currentArray.length == 0) {
      shuffle();
    }
    return currentArray.shift();
  };
};

rnd = new RandomArray(a);

它确实：

每次myArray.length元素创建一个新的随机数组。
除了最后一个元素的可能性之外，不要重复元素。

您可以通过修改以下内容将其集成到脚本中：

$(document).ready( function() {
  var textArray = [ ... ];
  rnd = new RandomArray(textArray);
  $('#text-content').loadText( rnd, 6000 );
});

$.fn.loadText = function( rnd, interval ) {
  ...
  obj.empty().html( rnd.next() );
  ...
  timeOut = setTimeout( function(){ obj.loadText( rnd, interval )}, interval );
  ...
  if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( rnd, interval );}
  ...
}

删除random_array。

随机文本数组+淡出间隔+随机播放

3 个答案: