barbara barbara - 5 months ago 25
Javascript Question

How to make infinity loop with delay in JavaScript?

I'm trying to make div which could change it color. Here is my code:



window.onload = function () {
for (;;){
setTimeout(function () {
document.querySelector('style').style.backgroundColor = colors[rand(colors.length)];
}, 2000);
}
}

var colors = [
'red',
'green',
'blue',
'yellow',
'magenta',
'pink'
];


var rand = function (max) {
return Math.floor(Math.random() * max);
};

.style{
background-color: pink;
top: 50px;
left: 50px;
height: 50px;
width: 50px;
}

<body>
<div class="style"></div>
</body>





But I can't find out why it doesn't work.

EDIT: the script also crashes the browser

Answer Source

Single element

Assuming that your markup is this:

<body>
    <div id="my-id"></div>
</body>

To create a "color loop" you'll have to use setInterva() to set a function that will be executed infinite times (with a defined interval) to change the color. Here is the correct code:

var cur_color = -1,
    colors = [
        'red',
        'green',
        'blue',
        'yellow',
        'magenta',
        'pink'
    ];

var myInterval = setInterval(function() {
    document.getElementById('my-id').style.backgroundColor = colors[(++cur_color) % colors.length];
}, 2000);

This will change the color every 2 seconds. If you want to stop it, you can use the clearInterval() function:

clearInterval(myInterval);

Multiple elements

Assuming your markup is:

<body>
    <div class="my-class"></div>
    <div class="my-class"></div>
    <div class="my-class"></div>
</body>

You can use the getElementsByClassName() method instead:

var myInterval = setInterval(function() {
    var elements = document.getElementsByClassName('my-class');
    ++cur_color;
    for (var i=0; i<elements.length; i++) elements[i].style.backgroundColor = colors[cur_color % colors.length];
}, 2000);

Working example

Here's a working example with multiple elements:

var cur_color = -1,
    colors = [
        'red',
        'green',
        'blue',
        'yellow',
        'magenta',
        'pink'
    ];

var myInterval = setInterval(function () {
    var elements = document.getElementsByClassName('my-class');
    ++cur_color;
    for (var i = 0; i < elements.length; i++) elements[i].style.backgroundColor = colors[cur_color % colors.length];
}, 2000);
.my-class {
    background-color: pink;
    top: 50px;
    left: 50px;
    height: 50px;
    width: 50px;
    margin: 10px;
}
<body>
    <div class="my-class"></div>
    <div class="my-class"></div>
    <div class="my-class"></div>
<body>