jQuery Run through array to replace page title every 5 seconds

Question

I have used this code previously but it randomizes the array. But I can't seem to get this script to change the page title every 5 seconds.

<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>

I have placed a div called #page_title into my page that has display:none the content changes on this div but the title just doesn't.

Answer 1

If you don't care about preserving the order of the array after the animation stops you can just use the following:

// 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();
});

Note that you shift() the array and then push() each element back on the end of the array, so if you stop the loop the array might not be in the same order you sent it.

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

Answer 2

Try

$(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;
}