Randomize setInterval to show random images at random time

Question

I manage to fin js scripts for random images and js code to randomize setinterval function. I manage to make them work together but images change super fast. I need images to change 1 time in random time between 1min ot 10min .

function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}

function doSomething() {}

(function loop() {
    var rand = Math.round(Math.random() * 9999999999 );
    setTimeout(function() {
            doSomething();
            loop();  
    }, rand);
}());

randomImage();
setInterval(randomImage, doSomething());

EPILEPSY WARNING Images in jsfiddle demo flashing and rotating very fast! here is a jsfiddle demo jsfiddle example

Answer 1

That's because you have doSOmething() as the second parameter of setInterval(). The second parameter of setInterval() is the interval you want it to run (The same as setTimeout(), but will run indefenetely until you stop it with clearInterval()).

If you do it like this:

setInterval(randomImage, (60*1000) + Math.floor(Math.random()*9*60*1000));

You are creating an interval that will be random between 1 minute and 10 minutes. BUT, it will run at that random interval always. I mean, if the random return is 2 minutes, the randomImage function will be called one time each 2 minutes, so, if you want a random interval each time then you should do a setTimeout each time, so you can update when will the next randomImage call be.

Also, I noticed that you are running a setTimeout inside your randomImage function ,meaning that you were trying the correct way, simply that you failed on the setInterval thingy.

Just remove the setInterval function and update the setTimeout accordingly, like this:

function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}

(function loop() {
    var between1and10min =  (60*1000) + Math.floor(Math.random()*9*60*1000);
    setTimeout(function() {
            randomImage();
            loop();  
    }, between1and10min);
}());

randomImage();

Fiddle: https://jsfiddle.net/2w45Lmro/3/

And, actually, you can fit the loop inside the randomImage function with one line:

(function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

  setTimeout(randomImage, (60*1000) + Math.floor(Math.random()*9*60*1000));
})();

Fiddle: https://jsfiddle.net/2w45Lmro/4/

Answer 2

Your code seem confusing a bit. Inside the loop function you are calling doSomething which does nothing instead of calling randomImage. And you have two mechanism of looping (one using setTimeout inside loop and one using setInterval where only the first is sufficient).

function randomImage() {
  var fileNames = [
    "http://i.imgur.com/YibF8aO.jpg",
    "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
    "http://i.imgur.com/JMgKg9O.jpg"
  ];
  var randomIndex = Math.floor(Math.random() * fileNames.length);
  document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';

}

(function loop() {
  randomImage();                                        // change to a random image
  var rand = Math.floor(Math.random() * 5000) + 2000;   // get a number between 2 and 7 (5 + 2) seconds (you can change to whatever meets your need)
  setTimeout(loop, rand);                               // call loop after that amount of time is passed
}());                                                   // call loop at startup to get a random image on start

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

<div id="background"></div>

Answer 3

Check the below code. change the image between 1 to 10 second.

<!DOCTYPE html>
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
        <script type="text/javascript">

            function getRandomInt(min, max) {
                return Math.floor(Math.random() * (max - min + 1)) + min;
            }

            function setNewInterval() {
                var randomInterval = getRandomInt(1000, 10 * 1000);
                console.log(randomInterval / 1000 + ' seconds');
                setTimeout(function () {
                    randomImage();
                }, randomInterval);
            }

            function randomImage() {
                var fileNames = [
                  "http://i.imgur.com/YibF8aO.jpg",
                  "http://ryanlb.com/images/other/images/getter-dragon-2.jpg",
                  "http://i.imgur.com/JMgKg9O.jpg"
                ];
                var randomIndex = getRandomInt(0, 2);
                document.getElementById("background").style.background = 'url(' + fileNames[randomIndex] + ')';
                setNewInterval();
            }
            setNewInterval();
        </script>
    </head>
    <body>
        <div id="background" style="width: 700px; height: 500px;"></div>
    </body>
    </html>

Answer 4

This is because you're calling setInterval with no 2nd parameter value. That second value is the time, in milliseconds that that the function in the 1st parameter should fire. Since it's undefined, that's the same as saying 0.

I think what you want is a recursive setTimeout.

I forked your jsfiddle: https://jsfiddle.net/7g3rwhnw/

Notice I commented out the line that does the random stuff and I'm just updating every second instead of getting a random # of milliseconds.