jQuery: infinite loop through array... each()?

Question

I have a colored box:

<div id="colorblock"></div>
#colorblock { background:#3ff; width: 100%; height: 300px; }

I have an array of colors created in javascript:

var arr = [ "#f00", "#ff0", "#f0f", "#f66"];

I iterate through those colors with a jQuery each() function:

$.each(arr, function(key, value) {
  $('#colorblock').delay('1200').animate({backgroundColor:value}, 600);
});

When the array iterates to the end, how can I start the array iteration over (so the animation goes on forever)?

Why iterate when you can just use array indexes? i=0; arr[i++ % arr.length] — neurino
– neurino, Commented Sep 7, 2016 at 16:06

Raynos · Accepted Answer · 2011-05-18 22:26:05Z

11

var arr = ["#f00", "#ff0", "#f0f", "#f66"];

// run through the array forever
(function recurse(counter) {
    // get the colour
    var color = arr[counter];
    // animate it
    $('#colorblock').delay('1200').animate({
        backgroundColor: color
    }, 600);
    // delete the value to save memory
    delete arr[counter];
    // add the value at the end of the array
    arr.push(color);
    // run it again for the next number
    setTimeout(function() {
        recurse(counter + 1);
    }, 200);
// start it for the first number.
})(0);

Infinite recursion. Delete the current entry, then add the current value to the end.

Live Example

For those who are interested in what the array looks like:

["#foo", "#ff0", "#f0f", "#f66"] (counter = 0)
[undefined, "#ff0", "#f0f", "#f66", "#foo"] (counter = 1)
[undefined, undefined, "#f0f", "#f66", "#foo", "#ff0"] (counter = 2)
[undefined, undefined, undefined, "#f66", "#foo", "#ff0", "#f0f"] (counter = 3)
[undefined, undefined, undefined, undefined, "#foo", "#ff0", "#f0f", "#f66"] (counter = 4)
etc.

edited May 18, 2011 at 22:26

answered May 18, 2011 at 22:03

Raynos

170k57 gold badges359 silver badges399 bronze badges

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

5 Comments

Naftali Over a year ago

i assume you are using my set_color function?

Roko C. Buljan Over a year ago

please... (we are here to learn so... ;) The last line of your code: })(0); i played with numbers: 0, 1, 2, 3. Interesting things happend. What is this exactly?

Raynos Over a year ago

@roXon added more details / comments.

Roko C. Buljan Over a year ago

@Raynos... You are so kind! You just earned a +10! (I just can't find the button ;) well... +1

Riccardo Volpe Over a year ago

Perfect solution... but how to toggle it? I'm trying using jQuery .toggle() with stop() on recurse()...

Naftali · Accepted Answer · 2011-05-18 21:54:21Z

5

Try this:

var arr = ["#f00", "#ff0", "#f0f", "#f66"];
$.each(arr, function(key, value) {
    set_color(value);
});

function set_color(color) {
    $('#colorblock').delay('1200').animate({
        backgroundColor: color
    }, 600);
    setTimeout(function() {
        set_color(color);
    }, 2000); //restart in 2 seconds
}

Fiddle: http://jsfiddle.net/maniator/F6nJu/1/

answered May 18, 2011 at 21:54

Naftali

147k41 gold badges247 silver badges304 bronze badges

6 Comments

superUntitled Over a year ago

this works, thank you! the setTimeout() function does not seem to work, but no matter, as I have set a delay before the animation.

Roko C. Buljan Over a year ago

@Neal... why is there a setTimeout if delay is set? ... if I remove the timeout the animation stops. What is actually doing setTimeout? thanks in advance!

Naftali Over a year ago

@superUntitled, its 2 secs for that color, not any color

Naftali Over a year ago

@roXon setTimeout is recursing the function

user1385191 Over a year ago

$.each for an array that isn't jQuery elements? Yuck. Use a for or while loop.

|

Panagiotis Panagi · Accepted Answer · 2012-11-20 14:59:40Z

2

Array.prototype.recurse = function(callback, delay) {
   delay = delay || 200; 
   var self = this, idx = 0;

   setInterval(function() {
      callback(self[idx], idx);
      idx = (idx+1 < self.length) ? idx+1 : 0;
   }, delay);
}

Try it on StackOverFlow:

["#f00", "#ff0", "#f0f", "#f66"].recurse(function(item, index) { 
    $('body').css('background-color', item);
}, 300);

answered Nov 20, 2012 at 14:59

Panagiotis Panagi

10.1k7 gold badges60 silver badges103 bronze badges

Comments

lcllarsen · Accepted Answer · 2016-10-13 21:06:13Z

0

var arr = ["#f00", "#ff0", "#f0f", "#f66"];

(function recurse(counter) {
    var arrLength = arr.length;
    var index = counter%arrLength;

    var color = arr[index];

    $('#colorblock').delay('1200').animate({
       backgroundColor: color
     }, 600);

    setTimeout(function() {
       recurse(counter + 1);
    }, 200);

})(0);

answered Oct 13, 2016 at 21:06

lcllarsen

11 bronze badge

1 Comment

Gilad Green Over a year ago

Being posted 5 years after question was asked and accepted I recommend you add some details on why this solution is better

Collectives™ on Stack Overflow

jQuery: infinite loop through array... each()?

4 Answers 4

5 Comments

6 Comments

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

5 Comments

6 Comments

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related