Continously loop over array in JavaScript

Question

I have an array of colors, that I need to «travel» through a set of elements, in order to create a visual effect. I struggle with getting the logic right.

I have X number of colors, say ["red", "blue", "yellow", "green"]. They need to be looped across Y <div> elements. At every interval, color will shift from one <div> into a holding variable, or from the holding variable into the next <div>in line.

Visual to explain how color travels

I will write a minimal example once I have nailed it. I am not at liberty to share it as-is. — Henrik
– Henrik, Commented Feb 11, 2014 at 20:04

ojovirtual · Accepted Answer · 2014-02-11 16:42:11Z

1

You can use pop and unshift to get elements from the rear of the array and inject them in the front.

var colours=["red", "blue", "yellow", "green"];

function mifunc(){    
    var element=colours.pop();
    colours.unshift(element);
}

Now use setInterval to call myfunc and paint the array in order everytime you call it.

Not a complete solution but may help you.

answered Feb 11, 2014 at 16:42

ojovirtual

3,36219 silver badges21 bronze badges

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

Comments

Glenn Ferrie · Accepted Answer · 2014-02-11 16:52:41Z

0

Here is a working sample. Feel free to re-use / adjust:

    <html>
    <head>
        <style type="text/css">
            .color { height: 100px; width: 100px; float: left; margin-right: 5px; }
            .red { background-color: red; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .green { background-color: green; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            var code = {
                hiddenIndex : -1,
                showAll : function () { 
                    $(".red").css("background-color","red");
                    $(".blue").css("background-color","blue");
                    $(".yellow").css("background-color","yellow");
                    $(".green").css("background-color","green");
                },
                hideOne : function (cssRef) { 
                    code.showAll();
                    $(cssRef).css("background-color","white");
                },
                animate : function () { 
                    switch(code.hiddenIndex) {
                        case -1:
                            code.showAll();
                            break;
                        case 0:
                            code.hideOne(".red");
                            break;
                        case 1:
                            code.hideOne(".blue");
                            break;
                        case 2:
                            code.hideOne(".yellow");
                            break;
                        case 3:
                            code.hideOne(".green");
                            break;
                    }
                    code.hiddenIndex++;
                    if (code.hiddenIndex > 3) code.hiddenIndex = -1;
                }
            };
            (function () { 
                window.setInterval(function () { code.animate(); }, 200);
            })();
        </script>
    </head>
    <body>
        <div class="colors">
            <div class="red color"></div>
            <div class="blue color"></div>
            <div class="yellow color"></div>
            <div class="green color"></div>
        </div>
    </body>
</html>

answered Feb 11, 2014 at 16:52

Glenn Ferrie

10.4k3 gold badges46 silver badges77 bronze badges

3 Comments

Henrik Over a year ago

This correctly hides an element in sequence, but my issue is that I have more colors than elements. Keeping track of the extra colors could probably be done more elegantly by using the proper array functions, as suggested by @ojovirtual.

Glenn Ferrie Over a year ago

I dont think your example has enough iterations to demonstrate the full behavior. you mean you want to see 4 colors to iterate over 3 divs?

Glenn Ferrie Over a year ago

new option added -- see below

Glenn Ferrie · Accepted Answer · 2014-02-11 17:02:43Z

BONUS: KnightRider-style oscillating action (otherwise same code):

    <html>
    <head>
        <style type="text/css">
            .color { height: 100px; width: 100px; float: left; margin-right: 5px; }
            .red { background-color: red; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .green { background-color: green; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            var code = {
                hiddenIndex : -1,
                direction: 1,
                showAll : function () { 
                    $(".red").css("background-color","red");
                    $(".blue").css("background-color","blue");
                    $(".yellow").css("background-color","yellow");
                    $(".green").css("background-color","green");
                },
                hideOne : function (cssRef) { 
                    code.showAll();
                    $(cssRef).css("background-color","white");
                },
                animate : function () { 
                    switch(code.hiddenIndex) {
                        case -1:
                            code.showAll();
                            break;
                        case 0:
                            code.hideOne(".red");
                            break;
                        case 1:
                            code.hideOne(".blue");
                            break;
                        case 2:
                            code.hideOne(".yellow");
                            break;
                        case 3:
                            code.hideOne(".green");
                            break;
                        case 4:
                            code.showAll();
                            break;
                    }
                    code.hiddenIndex = code.hiddenIndex + code.direction;
                    if (code.hiddenIndex > 3 || code.hiddenIndex < 0) code.direction = code.direction * -1;
                }
            };
            (function () { 
                window.setInterval(function () { code.animate(); }, 200);
            })();
        </script>
    </head>
    <body>
        <div class="colors">
            <div class="red color"></div>
            <div class="blue color"></div>
            <div class="yellow color"></div>
            <div class="green color"></div>
        </div>
    </body>
</html>

Glenn Ferrie · Accepted Answer · 2014-02-11 17:14:54Z

4 colors "travelling" over 3 divs

    <html>
    <head>
        <style type="text/css">
            .color { height: 100px; width: 100px; float: left; margin-right: 5px; }
            .red { background-color: red; }
            .blue { background-color: blue; }
            .yellow { background-color: yellow; }
            .green { background-color: green; }
        </style>
        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>
            var code = {
                firstPass : 1,
                colorOptions : ["red", "blue", "yellow", "green"], 
                shift : function () { // borrowed from ojovirtual
                    var c = code.colorOptions.pop();
                    code.colorOptions.unshift(c);
                },
                animate : function () { 
                    if (code.firstPass === 0) { // do not call on first pass through of code
                        $("#div1").removeClass(code.colorOptions[0]);
                        $("#div2").removeClass(code.colorOptions[1]);
                        $("#div3").removeClass(code.colorOptions[2]);
                        code.shift();
                    }
                    $("#div1").addClass(code.colorOptions[0]);
                    $("#div2").addClass(code.colorOptions[1]);
                    $("#div3").addClass(code.colorOptions[2]);

                    code.firstPass = 0; // indicate first pass is complete. 
                }
            };
            (function () { 
                window.setInterval(function () { code.animate(); }, 200);
            })();
        </script>
    </head>
    <body>
        <div class="colors">
            <div id="div1" class="color"></div>
            <div id="div2" class="color"></div>
            <div id="div3" class="color"></div>
        </div>
    </body>
</html>

Collectives™ on Stack Overflow

Continously loop over array in JavaScript

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

Comments

3 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related