How to make an infinite loop with delay in JavaScript?

Question

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

Add your code here as well. There is a reason you can't include a jsfiddle link without any code here. — Sirko, Oct 19 '14 at 14:17
https://developer.mozilla.org/en-US/docs/Web/API/WindowTimers.setInterval — vittore, Oct 19 '14 at 14:18
You have an infinite loop, that's why. The `setTimeout` callback can never be executed because the event loop can't proceed the next tick. — Felix Kling, Oct 19 '14 at 14:20
@FelixKling Actually it's not an infinite loop, but filling the task queue endlessly with new `setTimeout` tasks I'd say. The reason the browser crashes is simply a stack overflow. — KooiInc, Oct 19 '14 at 14:39

Marco Bonelli · Accepted Answer · 2017-08-17T12:51:24.073

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>

score 4 · Answer 2 · answered Oct 19 '14 at 14:20

4

You need setInterval function.

Also, instead of style, you need .style selector (the class selector). If you are using jquery, you may use $(".style") instead of document.querySelector(...):

window.onload = function() {
  setInterval(function() {
    document.querySelector('.style').style.backgroundColor = colors[rand(colors.length)];
    //$('.style').css("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>

answered Oct 19 '14 at 14:20

Ionică Bizău

109,027
88
289
474

There is no need of jQuery at all. – Marco Bonelli Oct 19 '14 at 14:23
@MarcoBonelli True, wasn't the question tagged with jQuery? – Ionică Bizău Oct 19 '14 at 14:24
@MarcoBonelli I see, but I was checking out jQuery questions... Maybe I came here from the newest questions on the side? Probably... – Ionică Bizău Oct 19 '14 at 14:27

score 1 · Answer 3 · edited May 23 '17 at 10:33

1

See the code in this jsFiddle, and my answer to this SO-question

You can't execute setTimeout in a loop. Create a function, and call it in a next setTimeout:

function changeColor() {
            document.querySelector('.style')
             .style.backgroundColor = colors[rand(colors.length)];
            setTimeout(changeColor,1000);
}

Here's your jsFiddle, rewritten

edited May 23 '17 at 10:33

Community

1
1

answered Oct 19 '14 at 14:23

KooiInc

119,216
31
141
177

How to make an infinite loop with delay in JavaScript?

3 Answers3

Single element

Multiple elements

Working example