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
3 answers
solution1
7 ACCPTED 2014-10-19 14:22:46
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>
solution2
4 2014-10-19 14:20:44
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>
solution3
1 2014-10-19 14:23:28
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.