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

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，一个随机返回正数或负数的函数。

这是应该对数组进行洗牌的代码。

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

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