Constantly loop a javascript array and display results to div?

Question

I have a bunch of testimonials for my site which are currently on a page and am trying to get a div to display each 1 at an interval of 5 seconds, if the array reaches the last value it should start back to beginning of the array again.

Here is what I have so far...

var testimonial = new Array();
testimonial[1] = "Rugby";
testimonial[2] = "Baseball";
testimonial[3] = "Cricket";
var length = testimonial.length
var i = 1;
setInterval(function() {
    while (i <= length) {   
        $('#testimonials p').html(testimonial[i]);
        ++i;
        if (i == length) {
            i == 1;
        }
    }
}, 5000);

Any help would be great, thanks.

I don't know where you took this code from, but in javascript, indexes start with 0 — qwertymk
– qwertymk, Commented Nov 24, 2011 at 5:33
Why don't you just put var i = 1; inside the anonymous function in setInterval? That way it will reset itself. And like qwertymk said, indexes start at 0. — flesk
– flesk, Commented Nov 24, 2011 at 5:37
It is not quite clear what the question is. What is not working? — Emond
– Emond, Commented Nov 24, 2011 at 7:04

David Hu · Accepted Answer · 2011-11-24 05:42:43Z

23

Try

var testimonial = ['Rugby', 'Baseball', 'Cricket'];
var numTestimonials = testimonial.length;
var index = 0;

setInterval(function() {
    $('#testimonials p').text(testimonial[index]);        
    index = (index + 1) % numTestimonials;
}, 5000);

JavaScript arrays are 0-indexed and have handy array literal syntax. Using the modulus operator (%) is an idiomatic way of wrapping a counter back to 0 once it reaches a certain value.

edited Nov 24, 2011 at 5:42

answered Nov 24, 2011 at 5:35

David Hu

3,15626 silver badges26 bronze badges

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

4 Comments

Colonel Over a year ago

@divad12 Thanks for this, is the operator you used the same as the modulus one in php? Again thanks, will accept when I can :)

Colonel Over a year ago

Can I ask why you changed it from html() to text(), is there any real difference in using one or the other?

David Hu Over a year ago

@Colonel I think so -- it returns the remainder of the first operand divided by the second operand. See developer.mozilla.org/en/JavaScript/Reference/Operators/…

David Hu Over a year ago

@Colonel If you just want to display raw strings inside your div, then .text will escape the string for you. See stackoverflow.com/q/1910814/392426 and api.jquery.com/text

qwertymk · Accepted Answer · 2011-11-24 05:35:36Z

0

You can try

setInterval(function() { 
    $('div').html(test[  (i = (i + 1) % length)  ]) },
5000);

answered Nov 24, 2011 at 5:35

qwertymk

35.6k31 gold badges127 silver badges184 bronze badges

1 Comment

qwertymk Over a year ago

Assuming you start with an index of 0 and not 1

Claudiu · Accepted Answer · 2011-11-24 05:36:30Z

0

The function in setInterval is being called every 5 seconds. That means you display the 5 testimonials one after another really quick every 5 seconds instead of displaying them one after the other.

You should do something like:

var testimonial = new Array();
testimonial[1] = "Rugby";
testimonial[2] = "Baseball";
testimonial[3] = "Cricket";
var length = testimonial.length
var i = 0; // arrays start with 0

setInterval(function() {
    $('#testimonials p').html(testimonial[i]);
    i++;
    if (i == length) i = 0;
}, 5000);

answered Nov 24, 2011 at 5:36

Claudiu

3,2611 gold badge18 silver badges27 bronze badges

Comments

RobG · Accepted Answer · 2011-11-24 05:45:42Z

0

Many interesting answers, so one more won't hurt. :-)

You can bundle it all up in an immediately called function expression:

(function() { 
  var testimonials = ['Rugby', 'Baseball', 'Cricket'];
  var i = 0;
  setInterval(function() {
    $('#testimonials p').text(testimonials[++i % testimonials.length]);
  }, 5000);
}());

answered Nov 24, 2011 at 5:45

RobG

148k32 gold badges180 silver badges216 bronze badges

1 Comment

David Hu Over a year ago

The behaviour won't be quite the same because of the pre-increment operator; if you start off i at -1, then it will display 'Rugby' as the first item. Also, I thought the idiom for an immediately-called function expression is (function(){ ... })();, while you have (function(){...}()); (close parenthesis placement).

Collectives™ on Stack Overflow

Constantly loop a javascript array and display results to div?

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related