2

我有一组文本，它们在设定的时间间隔内带有淡入淡出并且是随机的（请参阅我的网站）。问题是我希望数组随机播放，以便在所有数组循环完成之前没有文本重复。我尝试textArray.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;
}
4

3 回答 3

0

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

​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每次每个元素都创建一个新的 shuffle'd 数组。
  • 不要重复元素，除非最后一个元素有机会。

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

$(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。

于 2012-06-03T15:52:57.797 回答
0

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

这是应该打乱您的数组的代码。

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

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

于 2012-06-03T15:22:09.460 回答
0

你可以写一个数组洗牌。

演示：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;
}
于 2012-06-03T15:29:05.213 回答