Randomize setInterval to display random images at arbitrary times
I manage to copy the js scripts for random images and js code to randomize the setinterval function. I manage to get them to work together, but the images change quickly. I need images to change 1 time at a random time between 1 min. From 10 min.
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 The images in the jsfiddle of the demo rotate fast and fast! here is a jsfiddle daemon jsfiddle example
source to share
This is because you are calling setInterval
without the 2nd parameter value. This second value is the time, in milliseconds, that should be triggered in the first parameter. Since it's undefined, it's the same as saying 0.
I think you want recursive setTimeout
.
I have forked your jsfiddle: https://jsfiddle.net/7g3rwhnw/
Note that I have commented out the line that does random stuff and I just update every second instead of getting a random number of milliseconds.
source to share
Your code is a little confusing. Inside the function, loop
you call doSomething
, which does nothing instead of calling randomImage
. And you have two loop mechanisms (one uses setTimeout
internally loop
and one uses 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>
source to share
Check the below code. change the image between 1 and 10 seconds.
<!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>
source to share
This is because you have doSOmething()
both the second parameter setInterval()
. The second parameter setInterval()
is the interval you want to start (same as setTimeout()
but will run indefinitely until you stop it with clearInterval()
).
If you do it like this:
setInterval(randomImage, (60*1000) + Math.floor(Math.random()*9*60*1000));
You create an interval that will be random between 1 minute and 10 minutes. BUT, it will always run in this random interval. I mean, if the random return is 2 minutes, the function randomImage
will be called once every 2 minutes, so if you want a random interval every time, then you have to do it setTimeout
every time, so you can update when the next call comes randomImage
.
Also, I noticed that you are executing setTimeout
inside your function randomImage
, which means that you were trying to do the right thing, just that you failed at setInterval
thingy.
Just remove the function setInterval
and update setTimeout
accordingly, for example:
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, in fact, you can put a loop inside a function randomImage
on 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/
source to share