Question

我之前使用过此代码，但随机化了数组。但我似乎无法让这个脚本每5秒更改一次页面标题。

<script type="text/javascript">
    $(document).ready(function() {
        var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo", "cześć", "hei", "ciao"];
        $('#page_title').loadText( helloArray, 5000 ); // ( array, interval )
        document.title = $('#page_title').text();
    });
    // 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( 'fast' );
            });
            timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
            $("#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;
    }
</script>

我已将一个名为#page_title的div放入我的页面中，该div的内容发生了display:none但标题却没有。

Answer 1

如果你不关心在动画停止后保留数组的顺序，你可以使用以下内容：

// custom jquery plugin loadText()
$.fn.loadText = function( textArray, interval ) {
    return this.each( function() {
        var obj = $(this);
        obj.fadeOut( 'slow', function() {
            var elem = textArray[0];
            obj.empty().html( elem );
            textArray.shift();
            textArray.push(elem);
            obj.fadeIn( 'fast' );
        });
        timeOut = setTimeout( function(){ obj.loadText( textArray, interval )}, interval );
        $("#text-reload").click( function(){ 
            if( !obj.is(':animated') ) { clearTimeout( timeOut ); obj.loadText( textArray, interval );} // animation check prevents "too much recursion" error in jQuery 
        });
    });
};

$(document).ready(function() {
    var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo", "cześć", "hei", "ciao"];
    $('#page_title').loadText( helloArray, 5000 ); // ( array, interval )
    document.title = $('#page_title').text();
});

请注意，你移动（）数组然后将每个元素push（）返回到数组的末尾，所以如果你停止循环，那么数组可能与你发送它的顺序不同。

jsFiddle：http://jsfiddle.net/hY2rv/1/

Answer 2

尝试

$(document).ready(function() {
    var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo",
            "cześć", "hei", "ciao"];
    $('#page_title').loadText(helloArray, 5000); // ( array, interval )
    document.title = $('#page_title').text();
});
// custom jquery plugin loadText()
$.fn.loadText = function(textArray, interval) {
    return this.each(function() {
        var obj = $(this), intervalId;

        function change() {
            obj.fadeOut('slow', function() {
                var text = random_array(textArray);
                obj.html(text).fadeIn('fast');
                document.title = text;
            });
        }

        function start() {
            intervalId = setInterval(change, interval);
        };

        start();

        $("#text-reload").click(function() {
            if (!obj.is(':animated')) {
                clearInterval(intervalId);
                start();
            }
        });
    });
}
// public function
function random_array(aArray) {
    var rand = Math.floor(Math.random() * aArray.length + aArray.length);
    var randArray = aArray[rand - aArray.length];
    return randArray;
}

jQuery运行数组每5秒替换一次页面标题

2 个答案: