Background color is not working with for loop

Question

So my main goal is to randomize background every 1 second after clicking button. The problem is I'm getting random RGB every second as my console outputs it, but the background changes only after the last iteration.

function random_background(){
var i;
for(i = 0; i < 3; i++){
    let red = Math.floor(Math.random() * 256);
    let green = Math.floor(Math.random() * 256);
    let blue = Math.floor(Math.random() * 256);
    let randomcolor = "rgb(" + red + "," + green + "," + blue + ")";
    console.log(randomcolor);
    document.body.style.background = randomcolor;
    sleep(1000);
}
}

Javascript can't do a real `sleep`. You can fake it with async / await (promises) . But as is it looks like your sleep() is more than likely just causing a UI freeze then continuing on — Patrick Evans, Nov 20 '19 at 19:13
As mentioned Javascript doesn't have a sleep method, you want to use [setTimeout](https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setTimeout) instead. — Adam H, Nov 20 '19 at 19:14
Use js promise if you want to sleep the cose con some seconds — Alberto Sinigaglia, Nov 20 '19 at 19:15
@sijicc How did you code a synchronous sleep function in JS? I'd love to see this code. — Adam H, Nov 20 '19 at 20:52

Maheer Ali · Answer 1 · 2019-11-20T19:19:31.717

1

Javascript doesn't have any sleep method. To call a function after x times repeatedly you can use setInterval

function random_background() {
   let red = Math.floor(Math.random() * 256);
   let green = Math.floor(Math.random() * 256);
   let blue = Math.floor(Math.random() * 256);
   let randomcolor = "rgb(" + red + "," + green + "," + blue + ")";
   document.body.style.background = randomcolor;
}
setInterval(random_background, 1000);

edited Nov 20 '19 at 19:19

answered Nov 20 '19 at 19:16

Maheer Ali

35,834
5
42
73

Probably dont really want the loop in there though – Patrick Evans Nov 20 '19 at 19:16
Thank you, It worked. Although why didn't defining function sleep didn't work? ``` function sleep(milliseconds) { var start = new Date().getTime(); for (var i = 0; i < 1e7; i++) { if ((new Date().getTime() - start) > milliseconds){ break; } } } ``` – sijicc Nov 20 '19 at 19:19
That is just a loop, it doesn't allow for the ui update nor any other code to run while it is running. Javascript is single threaded which means when it is busy so is the ui – Patrick Evans Nov 20 '19 at 19:22
Didn't know that. I guess thats the problem of learning without preparation. Thanks again! :) – sijicc Nov 20 '19 at 19:25

score 0 · Answer 2 · answered Nov 20 '19 at 19:15

0

Use setinterval instead of sleep to give the browser a chance to do other things. Eg updating the display

answered Nov 20 '19 at 19:15

Ed Heal

59,252
17
87
127

score 0 · Answer 3 · answered Nov 20 '19 at 19:17

There is no sleep function in Javascript. You should use setInterval to run a function until the interval is clear and at an interval of 1 second.

Also, i don't see why you need a for loop here so i've removed it.

let interval = setInterval(() => {
  let red = Math.floor(Math.random() * 256);
  let green = Math.floor(Math.random() * 256);
  let blue = Math.floor(Math.random() * 256);
  let randomcolor = "rgb(" + red + "," + green + "," + blue + ")";
  document.body.style.background = randomcolor;
}, 1000);

Background color is not working with for loop

3 Answers3