jQuery removing the random array function successfully

Question

I have this piece of script and I'm unable to figure out how to remove the random function successfully so that the array flows through each array item one at a time instead of randomly showing each.

$(window).ready(function() {
    var helloArray = ["hello", "bonjour", "hola", "konnichiwa", "hujambo", "czesc", "hei", "ciao"];
    $('#page_title').loadText( helloArray, 5000 ); // ( array, interval )
});

$.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 );
                // animation check prevents "too much recursion" error in jQuery
                obj.loadText( textArray, interval );
            } 
        });
    });
}

//public function
function random_array( aArray ) {
    var rand = Math.floor( Math.random() * aArray.length + aArray.length );
    console.log(randArray);
    var randArray = aArray[ rand - aArray.length ];
    return randArray;
}

So, you want to randomly select an element, return it, then remove it from the array? Or did I miss the point of the question? — gen_Eric
– gen_Eric, Commented Apr 17, 2013 at 13:20
Keep the array as it is but instead of randomly going through it, I would like it to go through in sequence of order — ngplayground
– ngplayground, Commented Apr 17, 2013 at 13:22

Arun P Johny · Accepted Answer · 2013-04-17 13:57:50Z

1

Try

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

        function change() {
            obj.fadeOut('slow', function() {
                var text = textArray[counter++];
                obj.html(text).fadeIn('fast');
                document.title = text;

                counter = counter >= textArray.length ? 0 : counter;
            });
        }

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

        start();

        $("#text-reload").click(function() {
            if (!obj.is(':animated')) {
                clearInterval(intervalId);
                start();
            }
        });
    });
}

Demo: Fiddle

edited Apr 17, 2013 at 13:57

answered Apr 17, 2013 at 13:44

Arun P Johny

389k68 gold badges532 silver badges532 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

ngplayground Over a year ago

this gets stuck repeating the last item in the array

ngplayground Over a year ago

thanks I added $(this).html(textArray[0]); before var obj = $(this), intervalId, counter = 0; as the script never loaded anything right away and also changed the code to var obj = $(this), intervalId, counter = 1;

Arun P Johny Over a year ago

@DonaldSutherland I think you have asked a similar question at stackoverflow.com/questions/16060710/…

Arun P Johny Over a year ago

@DonaldSutherland did you check my answer to that question also

RustyTheBoyRobot Over a year ago

counter = counter >= textArray.length ? 0 : counter; can be more simply expressed as counter %= textArray.length;

RustyTheBoyRobot · Accepted Answer · 2013-04-17 13:36:43Z

1

Create a variable that holds which index you last loaded. Increment and mod (%) the variable each time you call loadText()

I would also suggest that you read up on jQuery's .data() function, since it looks like you're trying to create a jQuery plugin. This will help you keep track of your current index without polluting the global variable space.

Finally, it looks like you are trying to load your text every 5 seconds, but you do so by calling setTimeout, which forces you to add a bunch of code to guard against infinite recursion. You should check out the setInterval function, which fires off a callback every X number of milliseconds.

edited Apr 17, 2013 at 13:36

answered Apr 17, 2013 at 13:23

RustyTheBoyRobot

5,7334 gold badges38 silver badges57 bronze badges

Collectives™ on Stack Overflow

jQuery removing the random array function successfully

2 Answers 2

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related