JavasScript infinitive background change with function

Question

I'm curious if there is a way to repeat a function for as long as user stays on the page. I want function f1() to repeat changing the color of div #gallery. It's probably an infinitive loop or something, please help me.

function f1() {
  setTimeout(
    function() {
      document.getElementById("gallery").style.backgroundColor = "blue";
    }, 3000);
  setTimeout(
    function() {
      document.getElementById("gallery").style.backgroundColor = "red";
    }, 6000); 
}

#gallery {
  width: 500px;
  height: 300px;
  background-color: red;
}

<body onload="f1()">
  <div id="gallery">
   
  </div>
</body>

Check out `setInterval()` as it runs a function every X milliseconds until it's cleared -- https://developer.mozilla.org/en-US/docs/Web/API/WindowOrWorkerGlobalScope/setInterval — sbeliv01, May 08 '17 at 17:20

score 2 · Answer 1 · answered May 08 '17 at 18:13

The previous method of using setInterval is really great, but I personally like to have a little bit more control over what happens so I use something like this for repetition:

fiddle

The 'meat and bones' is a loop like this:

const target = document.getElementById('target');
const colors = ["red", "blue", "purple", "black", "gray", "aliceblue"];
const randomColor = () => {
    const randomInt = Math.floor(Math.random() * colors.length + 1);
    return colors[randomInt];
}
const userStillOnPage = true;

function f1(newInterval, continueWith) {
    target.style.background = randomColor();

    if (userStillOnPage) {
        setTimeout(continueWith || f1, newInterval || 1000);
    }
}


f1();

This method makes it easy to do all kinds of things like make the loop go faster by changing the interval or even injecting a different continuation function. It's quite powerful and easily abstracted to something very generic!

This method is far the most flexible and easily abstracted among the answers to this question. Really great. — GlennFriesen, Jun 09 '17 at 15:30

score 1 · Accepted Answer · answered May 08 '17 at 17:53

You can infinitely loop your javascript with setInterval:

<html>
<head>
<style>
#gallery {
  width: 500px;
  height: 300px;
  background-color: red;
}
</style>
</head>
<body onload="f1()">
  <div id="gallery">

  </div>
</body>
<script type="text/javascript"> 
function f1(){
  setInterval(oneSecondFunction, 9000);
};
function oneSecondFunction() {
  setTimeout(
    function() {
      document.getElementById("gallery").style.backgroundColor = "blue";
    }, 3000);
  setTimeout(
    function() {
      document.getElementById("gallery").style.backgroundColor = "red";
    }, 6000); 
}
</script>
</html>

score 1 · Answer 3 · answered May 08 '17 at 18:00

document.addEventListener('DOMContentLoaded', init);

function init() {
  var target = document.getElementById('gallery');
  setInterval(function() {
    target.style.backgroundColor = getRandomColor();
  }, 1000) 

  // From http://stackoverflow.com/questions/1484506/random-color-generator-in-javascript
  function getRandomColor() {
    var letters = '0123456789ABCDEF';
    var color = '#';
    for (var i = 0; i < 6; i++ ) {
        color += letters[Math.floor(Math.random() * 16)];
    }
    return color;
  }
}

JavasScript infinitive background change with function

3 Answers3