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

javascript に組み込みのシャッフル関数を認識していないため、textArray.shuffle() が原因でコードが失敗します。sort 関数を使用してシャッフルを実現できます。正または負の数値をランダムに返す関数である 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 に答える
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すべての要素ごとに、新しくシャッフルされた配列を作成します。
  • 最後の要素にある可能性を除いて、要素を繰り返さないでください。

以下を変更することで、これをスクリプトに統合できます。

$(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 に答える